Skip to content

How can I open multiple dialog boxes in a single page?

bloodyKnuckles
naomi

I am trying to open multiple dialog boxes in one page with an iframe inside to resemble a browser window.

I have an example here: http://jsfiddle.net/pxQ8j/770/

The first icon opens up when clicked as I want it to, however the second dialog doesn’t and the div contents remain unhidden.

I am also curious how I can remove the double scroll bars that show when the dialog is being resized.

Thank you in advance!!

code:

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

Advertisement

Answer

For value of attributes in HTML you must use " , not “

HTML attributes syntax is name="value" (HTML Attributes)

please change id= “hats” to 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>