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

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“>
      <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" );
        });

Answer 1

对于 HTML 中的属性值，您必须使用 "，而不是 “

HTML 属性语法为name="value" (HTML Attributes)

请将id= “hats” 更改为id="hats"

         $( "#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'
         });
         
         
        $( '.icon2' ).click(function() {
            $( "#hats" ).dialog( "open" );
            });
        $( '.icon1' ).click(function() {
            $( "#gallery" ).dialog( "open" );
            });
        

  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;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<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“>
          <iframe src="paynomind.us/files"></iframe> 
        </div>
        
	<div id="hats" title="text">
          <iframe src="paynomind.us/hats"></iframe> 
        </div>

Answer 2

将id= “hats” 更改为id= "hats"，并将.ui-dialog-content 中的overflow: auto; 更改为overflow: hidden;