javascript - 如何在一个页面中打开多个对话框？

Question

我试图在一个页面中打开多个对话框，里面有一个 iframe，以类似于浏览器窗口。

我在这里有一个例子：http: //jsfiddle.net/pxQ8j/770/

第一个图标在单击时会按我的意愿打开，但是第二个对话框不会，并且 div 内容保持未隐藏。

我也很好奇如何删除在调整对话框大小时显示的双滚动条。

先感谢您！！

代码：

 <div class="icons">
 <div id="draggable" class="icon1">
 <div class="icons">
 <a href="#"><img src="http://paynomind.us/wp- content/uploads/2018/06/polaroid-icon-02.png"></a></div>
 <div class="iconTXT"> SS 18' </div>
 </div>

        <br>
        <br>

 <div id="draggable" class="icon2">
            <div class="icons">
 <a href="#"><img src="http://paynomind.us/wp- content/uploads/2018/06/hat-icon-03.png"></a></div>
        <div class="iconTXT"> HATS </div> 
        </div>
<div id="gallery" title=“paynomind.us/files“&gt;
      <iframe src="paynomind.us/files"></iframe> 
    </div>

<div id= “hats” title="text">
      <iframe src="paynomind.us/hats"></iframe> 
    </div>

  iframe {
  width: 100%;
  height: 100%;
  padding-right :0;
 overflow: hidden;
  }

 .ui-dialog .ui-widget-header {
 background: #D3D3D3;
 border: 0;
 color: black;
 font-weight: normal;
 font-family: Arial;
 font-size: 12px;
 margin: 1px 0;
 } 

.ui-dialog .ui-dialog-content {
 overflow: auto;
 position: relative;
 padding: 0
 margin: 0;
 align-content: center;
 height: auto;
 width:auto;
   }

.ui .dialog {
 left: 0;
 outline: 0 none;
 padding: 0 !important;
 position: absolute;
 top: 0;

  }


.ui .dialog ::-webkit-scrollbar { display: none;  }

    $( "#gallery" ).dialog({ 
         autoOpen: false,
         width:'700px',
         resizeable: 'true',
         modal: false,
         margin: '0',
         padding: '0'
     });
     $( "#hats" ).dialog({ 
         autoOpen: false,
         width:'700px',
         resizeable: 'true',
         modal: false,
         margin: '0',
         padding: '0'
     });

    $( '.icon1' ).click(function() {
        $( "#gallery" ).dialog( "open" );
        });
    $( '.icon2' ).click(function() {
        $( "#hats" ).dialog( "open" );
        });

标签： javascripthtmlcssdialog

Answer 1