我试图在弹出窗口中显示一个弹出窗口，但是它无法正常工作。
我有一页，如果您在img上单击，则会弹出一个页面。但是当您出现在弹出窗口中时，我想打开另一个带有链接的弹出窗口，然后返回并关闭它。我的页面在此页面上：https://85377.ict-lab.nl/KDMOBILE1/Mobile1/TinyLivin'/Homepage.html。
它是荷兰语，但在弹出部分中用于弹出。您可能不会在这里得到加载的屏幕，因为您没有照片，而我也有。
我是否必须向新的弹出窗口添加额外的组件或具有数据相关性的另一个页面？我在这里也有我的代码。我不擅长Java语言查询，所以我可能不明白。
我禁用了我的容器，因为我不需要它。还有一个针对移动设备的移动设备查询。在我的手机上，一切看起来都很好。
我仅需要在html div的弹出窗口中弹出窗口。如果您知道的话，我会尽快来到这里：）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="Reset.css">
<link rel="stylesheet" type="text/css" href="Mobilemenu.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
html{
height: 1000px;
}
#vak1geheel{
width: 50%;
height: 100%;
border: solid 1px;
position: relative;
left: 25%;
background: #F85032;
background: -moz-linear-gradient(-90deg, #F85032 0%, #F16F5C 50%, #F6290C 51%, #F02F17 71%, #E73827 100%);
background: -webkit-linear-gradient(-90deg, #F85032 0%,#F16F5C 50%,#F6290C 51%,#F02F17 71%,#E73827 100%);
background: linear-gradient(-90deg, #F85032 0%,#F16F5C 50%,#F6290C 51%,#F02F17 71%,#E73827 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F85032', endColorstr='#E73827',GradientType=0 );
}
#welkomstinfo img{
width: 100%;
position: relative;
}
#welkomstinfo h1{
text-align: center;
position: absolute;
top: 215px;
left: 70px;
margin-left: 32.778125%;
color: #33C7FF;
font-size: 1.5em;
}
h2{
text-align: center;
margin-top: 60px;
}
button{
width: 74%;
background-color: #33C7FF;
border: none;
height: 50px;
margin-left: 13%;
margin-right: 13%;
margin-bottom: 10px;
margin-top: 10px;
}
button:hover{
background-color: #000000;
color: #33C7FF;
border: none;
}
#footer1{
position: relative;
text-align: center;
border: solid 1px;
margin: 5px;
background-image: linear-gradient(-90deg, #61C419, #61C419, #FFFF00, #F85032, #F85032);
}
@media all and (max-device-width: 460px){
#vak1geheel{
width: 100%;
height: 100%;
border: solid 1px;
position: relative;
left: 0;
background: #F85032;
background: -moz-linear-gradient(-90deg, #F85032 0%, #F16F5C 50%, #F6290C 51%, #F02F17 71%, #E73827 100%);
background: -webkit-linear-gradient(-90deg, #F85032 0%,#F16F5C 50%,#F6290C 51%,#F02F17 71%,#E73827 100%);
background: linear-gradient(-90deg, #F85032 0%,#F16F5C 50%,#F6290C 51%,#F02F17 71%,#E73827 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F85032', endColorstr='#E73827',GradientType=0 );
}
#welkomstinfo img{
width: 100%;
position: relative;
}
#welkomstinfo h1{
text-align: center;
position: absolute;
top: 142px; /*top: 132px; h2*/
margin-left: 19%;
color: #33C7FF;
}
h2{
text-align: center;
margin-top: 60px;
}
button{
width: 74%;
background-color: #33C7FF;
border: none;
height: 50px;
margin-left: 13%;
margin-right: 13%;
margin-bottom: 10px;
margin-top: 10px;
}
button:hover{
background-color: #000000;
color: #33C7FF;
border: none;
}
#footer1{
position: relative;
text-align: center;
border: solid 1px;
margin: 5px;
background-image: linear-gradient(-90deg, #61C419, #61C419, #FFFF00, #F85032, #F85032);
}
}
</style>
</head>
<body>
<div id="pagina1" data-role="page" data-theme="b">
<div id="vak1geheel">
<!--<div class="container">
<nav>
<ul>
<li><a href="Homepage.html">Home</a></li>
<li><a href="Vervolgpagina1.html"></a></li>
<li><a href="Vervolgpagina2.html"></a></li>
<li><a href="Vervolgpagina3.html"></a></li>
</ul>
</nav>
</div>-->
<div id="welkomstinfo">
<img src="Welkomstimage.jpeg">
<h1>WELKOM!!</h1>
</div>
<div id="overzichtshuis1">
<div class="popup-overlay">
<a href="#popup1" data-rel="popup"><img src="Tinylivinghouse1.jpg" style="width: 58%;
height: 12em; margin-left: 21%; margin-top: 2em"></a>
</div>
</div>
<div id="overzichtshuis2">
<div class="popup-overlay">
<a href="#popup2" data-rel="popup"><img src="Tinylivinghouse2.jpg" style="width: 60%;
margin-left: 20%; height: 12em;"></a>
</div>
</div>
<div id="footer1">
<p>Social media linkjes(Je kan er gewoon op klikken)</p>
<img src="instagram-logo.png" width="45px" height="30px" onclick="window.location.href =
'https://www.instagram.com/tinylivin/'">
<img src="Reddit.png" width="30px" height="30px" onclick="window.location.href =
'https://www.reddit.com/user/Tinylivin/'"><p><strong>Tel: +1 707-567-8659</strong></p>
</div>
<div id="popup1" data-role="popup" data-transistion="fade" style="width: auto; top: 0;"><br/>
<h2 style="font-size: 2em;">Tiny house 1</h2>
<a href="#"><img src="Tinylivinghouse1.jpg" style="width: 60%; margin-left: 20%; margin-right: 20%;"></a>
<a href="#popup3" style="margin-left: 45.5%; margin-right: 45.5%;">Klik voor meer</a>
<p style="text-align: center;">40 m3</p>
<p style="text-align: center;">Veluwe</p>
<p style="text-align: center;">Geschikt voor gezin</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p>
<a role="button" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete
ui-btn-icon-notext ui-btn-left">X</a>
</div>
<div id="popup2" data-role="popup" data-transistion="fade" style="width: auto; top: 0;"><br/>
<h2 style="font-size: 2em;">Tiny house 2</h2>
<a href="#"><img src="Tinylivinghouse2.jpg" style="width: 60%; margin-left: 20%; margin-right: 20%;"></a>
<a href="#popup4" style="margin-left: 45.5%; margin-right: 45.5%;">Klik voor meer</a>
<p style="text-align: center;">22 m3</p>
<p style="text-align: center;">Heemvaardse plassen</p>
<p style="text-align: center;">Voor stelletjes</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p>
<a role="button" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete
ui-btn-icon-notext ui-btn-left">X</a>
</div>
<div id="popup3" data-role="popup" style="width: auto; top: 0;"><br/>
<h2 style="font-size: 2em;">Tiny house 3</h2>
<a href="#"><img src="Tinylivinghouse2.jpg" style="width: 60%; margin-left: 20%; margin-right: 20%;"></a>
<a href="#popup5" style="margin-left: 45.5%; margin-right: 45.5%;">Klik voor meer</a>
<p style="text-align: center;">22 m3</p>
<p style="text-align: center;">Heemvaardse plassen</p>
<p style="text-align: center;">Voor stelletjes</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p>
<a role="button" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete
ui-btn-icon-notext ui-btn-left">X</a>
</div>
<div id="popup4" data-role="popup" style="width: auto; top: 0;"><br/>
<h2 style="font-size: 2em;">Tiny house 4</h2>
<a href="#"><img src="Tinylivinghouse2.jpg" style="width: 60%; margin-left: 20%; margin-right: 20%;"></a>
<a href="#popup6" style="margin-left: 45.5%; margin-right: 45.5%;">Klik voor meer</a>
<p style="text-align: center;">22 m3</p>
<p style="text-align: center;">Heemvaardse plassen</p>
<p style="text-align: center;">Voor stelletjes</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p>
<a role="button" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete
ui-btn-icon-notext ui-btn-left">X</a>
</div>
<div id="popup5" data-role="popup" style="width: auto; top: 0;"><br/>
<h2 style="font-size: 2em;">Tiny house 2</h2>
<a href="#"><img src="Tinylivinghouse2.jpg" style="width: 60%; margin-left: 20%; margin-right: 20%;"></a>
<a href="#popup4" style="margin-left: 45.5%; margin-right: 45.5%;">Klik voor meer</a>
<p style="text-align: center;">22 m3</p>
<p style="text-align: center;">Heemvaardse plassen</p>
<p style="text-align: center;">Voor stelletjes</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p>
<a role="button" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete
ui-btn-icon-notext ui-btn-left">X</a>
</div>
<div id="popup6" data-role="popup" style="width: auto; top: 0;"><br/>
<h2 style="font-size: 2em;">Tiny house 2</h2>
<a href="#"><img src="Tinylivinghouse2.jpg" style="width: 60%; margin-left: 20%; margin-right: 20%;"></a>
<a href="#popup4" style="margin-left: 45.5%; margin-right: 45.5%;">Klik voor meer</a>
<p style="text-align: center;">22 m3</p>
<p style="text-align: center;">Heemvaardse plassen</p>
<p style="text-align: center;">Voor stelletjes</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p><br/>
<p style="margin-left: 5%; margin-right: 5%; width: 90%;">Lorem ipsum dolor sit amet et. Lorem ipsum
dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor
sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit
amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et. Lorem ipsum dolor sit amet
et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.Lorem ipsum dolor sit amet et.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor.</p>
<a role="button" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete
ui-btn-icon-notext ui-btn-left">X</a>
</div>
</div>
</div>
</body>
</html>