Как открыть несколько диалоговых окон на одной странице?

Question

Я пытаюсь открыть несколько диалоговых окон на одной странице с фреймом внутри, чтобы они напоминали окно браузера.

У меня есть пример здесь: 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

изменить id= “hats” на id= "hats" и изменить overflow: auto; на overflow: hidden; в .ui-dialog-content

Answer 2

Для значения атрибутов в HTML вы должны использовать ", а не “

Синтаксис атрибутов HTML: name="value" ( Атрибуты HTML )

пожалуйста, измените 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>