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:
JavaScript
x
23
23
1
<div class="icons">
2
<div id="draggable" class="icon1">
3
<div class="icons">
4
<a href="#"><img src="http://paynomind.us/wp- content/uploads/2018/06/polaroid-icon-02.png"></a></div>
5
<div class="iconTXT"> SS 18' </div>
6
</div>
7
8
<br>
9
<br>
10
11
<div id="draggable" class="icon2">
12
<div class="icons">
13
<a href="#"><img src="http://paynomind.us/wp- content/uploads/2018/06/hat-icon-03.png"></a></div>
14
<div class="iconTXT"> HATS </div>
15
</div>
16
<div id="gallery" title=“paynomind.us/files“>
17
<iframe src="paynomind.us/files"></iframe>
18
</div>
19
20
<div id= “hats” title="text">
21
<iframe src="paynomind.us/hats"></iframe>
22
</div>
23
JavaScript
1
39
39
1
iframe {
2
width: 100%;
3
height: 100%;
4
padding-right :0;
5
overflow: hidden;
6
}
7
8
.ui-dialog .ui-widget-header {
9
background: #D3D3D3;
10
border: 0;
11
color: black;
12
font-weight: normal;
13
font-family: Arial;
14
font-size: 12px;
15
margin: 1px 0;
16
}
17
18
.ui-dialog .ui-dialog-content {
19
overflow: auto;
20
position: relative;
21
padding: 0
22
margin: 0;
23
align-content: center;
24
height: auto;
25
width:auto;
26
}
27
28
.ui .dialog {
29
left: 0;
30
outline: 0 none;
31
padding: 0 !important;
32
position: absolute;
33
top: 0;
34
35
}
36
37
38
.ui .dialog ::-webkit-scrollbar { display: none; }
39
JavaScript
1
24
24
1
$( "#gallery" ).dialog({
2
autoOpen: false,
3
width:'700px',
4
resizeable: 'true',
5
modal: false,
6
margin: '0',
7
padding: '0'
8
});
9
$( "#hats" ).dialog({
10
autoOpen: false,
11
width:'700px',
12
resizeable: 'true',
13
modal: false,
14
margin: '0',
15
padding: '0'
16
});
17
18
$( '.icon1' ).click(function() {
19
$( "#gallery" ).dialog( "open" );
20
});
21
$( '.icon2' ).click(function() {
22
$( "#hats" ).dialog( "open" );
23
});
24
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"
JavaScript
1
25
25
1
$( "#gallery" ).dialog({
2
autoOpen: false,
3
width:'700px',
4
resizeable: 'true',
5
modal: false,
6
margin: '0',
7
padding: '0'
8
});
9
$( "#hats" ).dialog({
10
autoOpen: false,
11
width:'700px',
12
resizeable: 'true',
13
modal: false,
14
margin: '0',
15
padding: '0'
16
});
17
18
19
$( '.icon2' ).click(function() {
20
$( "#hats" ).dialog( "open" );
21
});
22
$( '.icon1' ).click(function() {
23
$( "#gallery" ).dialog( "open" );
24
});
25
JavaScript
1
38
38
1
iframe {
2
width: 100%;
3
height: 100%;
4
padding-right :0;
5
overflow: hidden;
6
}
7
8
.ui-dialog .ui-widget-header {
9
background: #D3D3D3;
10
border: 0;
11
color: black;
12
font-weight: normal;
13
font-family: Arial;
14
font-size: 12px;
15
margin: 1px 0;
16
}
17
18
.ui-dialog .ui-dialog-content {
19
overflow: auto;
20
position: relative;
21
padding: 0
22
margin: 0;
23
align-content: center;
24
height: auto;
25
width:auto;
26
}
27
28
.ui .dialog {
29
left: 0;
30
outline: 0 none;
31
padding: 0 !important;
32
position: absolute;
33
top: 0;
34
35
}
36
37
38
.ui .dialog ::-webkit-scrollbar { display: none; }
JavaScript
1
26
26
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
2
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
3
<div class="icons">
4
<div id="draggable" class="icon1">
5
<div class="icons">
6
<a href="#"><img src="http://paynomind.us/wp-content/uploads/2018/06/polaroid-icon-02.png"></a></div>
7
<div class="iconTXT"> SS 18' </div>
8
</div>
9
10
<br>
11
<br>
12
<div id="draggable" class="icon2">
13
<div class="icons">
14
<a href="#"><img src="http://paynomind.us/wp-content/uploads/2018/06/hat-icon-03.png"></a></div>
15
<div class="iconTXT"> HATS </div>
16
</div>
17
18
19
20
<div id="gallery" title=“paynomind.us/files“>
21
<iframe src="paynomind.us/files"></iframe>
22
</div>
23
24
<div id="hats" title="text">
25
<iframe src="paynomind.us/hats"></iframe>
26
</div>