看起来像这样：Image
我对JQuery很新，我试图联系其他人，但他们并不知道为什么它没有用。
我真的遇到了这个问题，我希望stackoverflow上有人知道这个问题。如果需要添加更多代码，请发送评论，我会添加它。
<!DOCTYPE html>
<html>
<head>
<title>Maasduinen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="javascript" href="script.js">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog-1">
TEST
</div>
<div id="dialog-2">
Naam Bed & Breakfast
</div>
<div id="dialog-3">
Testing
</div>
<div id="dialog-4">
Naam Bed & Breakfast
</div>
<div id="dialog-5">
Naam Bed & Breakfast
</div>
<div id="dialog-6">
hoi
</div>
<div id="dialog-7">
Testing
</div>
<div id="dialog-8">
nog test
</div>
<div id="dialog-9">
Naam Bed & Breakfast
</div>
</div>
<div class="maasduin-container">
<div class="row">
<input type="checkbox" id="spoiler" />
<label for="spoiler" >Appartementen</label>
<div class="spoiler">
<div class="products-1">
<div onclick="$('#dialog-1').dialog('open')"></div>
<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
</div>
<div class="maasduin-naam">TEST</h3></div>
<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
<div class="maasduin-telefoon">T 0478 50 12 34 / M 06 12 34 56 78</div>
<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>
</div>
<div class="products-8">
<div onclick="$('#dialog-8').dialog('open')"></div>
<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
<div class="maasduin-actiefoto">
<img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\maasduinpas.png">
</div>
</div>
<div class="maasduin-naam">nog test</h3></div>
<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
<div class="maasduin-telefoon"> T 0478 50 12 34 / M 06 12 34 56 78</div>
<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>
</div>
<input type="checkbox" id="spoiler" />
</div>
</div>
<div class="row">
<input type="checkbox" id="spoiler2" />
<label for="spoiler2" >Bed and Breakfast</label>
<div class="spoiler">
<div class="products">
<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
</div>
<div class="maasduin-naam">Naam Bed & Breakfast</h3></div>
<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
<div class="maasduin-telefoon"> T 0478 50 12 34 / M 06 12 34 56 78</div>
<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>
</div>
<input type="checkbox" id="spoiler2" />
</div>
</div>
<div class="row">
<input type="checkbox" id="spoiler3" />
<label for="spoiler3" >Bungalow en Chalets</label>
<div class="spoiler">
<input type="checkbox" id="spoiler" />
</div>
</div>
<div class="row">
<input type="checkbox" id="spoiler4" />
<label for="spoiler4" >Camping</label>
<div class="spoiler">
<div class="products">
<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
<div class="maasduin-actiefoto">
<img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\maasduinpas.png">
</div>
</div>
<div class="maasduin-naam">Naam Bed & Breakfast</h3></div>
<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
<div class="maasduin-telefoon"> T 0478 50 12 34 / M 06 12 34 56 78</div>
<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>
</div>
<input type="checkbox" id="spoiler" />
</div>
</div>
<div class="row">
<input type="checkbox" id="spoiler5" />
<label for="spoiler5" >Groepsaccommodatie</label>
<div class="spoiler">
<div class="products">
<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
</div>
<div class="maasduin-naam">Naam Bed & Breakfast</h3></div>
<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
<div class="maasduin-telefoon">T 0478 50 12 34 / M 06 12 34 56 78</div>
<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>
</div>
<input type="checkbox" id="spoiler" />
</div>
</div>
<div class="row">
<input type="checkbox" id="spoiler6" />
<label for="spoiler6" >Hotels</label>
<div class="spoiler">
<div class="products">
<div class="maasduin-foto"><img src="\Maasduinen-NW\image\huis.png">
</div>
<div class="maasduin-naam">hoi</h3></div>
<div class="maasduin-locatie">Straatnaam 12, 1234 AB Plaatsnaam</div>
<div class="maasduin-email">info@langenaamvandebedandbreakfast.nl</div>
<div class="maasduin-telefoon"> T 0478 50 12 34 / M 06 12 34 56 78</div>
<div class="maasduin-website">http://www.naambedandbreakfast.nl/</div>
</div>
<input type="checkbox" id="spoiler" />
</div>
</div>
<div class="row">
<input type="checkbox" id="spoiler7" />
<label for="spoiler7" >Kamperen bij de boer</label>
<div class="spoiler">
<input type="checkbox" id="spoiler" />
</div>
</div>
</div>
</body>
</html>
Div onclick
<div class="maasduin-container">
<div class="row">
<input type="checkbox" id="spoiler" />
<label for="spoiler" >Appartementen</label>
<div class="spoiler">
<?php
foreach($hotels as $key => $hotel)
{
?>
<?php if ($hotel['MaasduinCategory'] ==
'Appartementen'): ?>
<div class="products-<?php echo $hotel['MaasduinId'];?>">
<div onclick="$('div#<?php echo $hotel['MaasduinId'] ?>-dialog').dialog('open')"></div>
<div class="maasduin-foto"><img src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinImage']; ?>">
<?php if ($hotel['MaasduinPas'] == '1'):
?>
<div class="maasduin-actiefoto">
<img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinPasfoto']; ?>">
</div>
<?php endif ?>
</div>
<div class="maasduin-naam"><?php echo $hotel['MaasduinNaam']; ?></h3></div>
<div class="maasduin-locatie"><?php echo $hotel['MaasduinLocatie']; ?></div>
<div class="maasduin-email"><?php echo $hotel['MaasduinEmail']; ?></div>
<div class="maasduin-telefoon"><?php echo $hotel['MaasduinTelefoon']; ?></div>
<div class="maasduin-website"><?php echo $hotel['MaasduinWebsite']; ?></div>
</div>
<?php endif ?>
<?php
}
?>
<input type="checkbox" id="spoiler" />
</div>
</div>
需要打开的对话框：
<?php foreach($hotels as $key => $hotel)
{
?>
<div id="<?php echo($hotel['MaasduinId']) ?>-dialog">
<?php echo $hotel['MaasduinNaam']; ?>
</div>
<?php } ?>
答案 0 :(得分：1)
我建议尝试一些东西：
如果没有任何效果，请按CTRL + U并将源保存在某处，以便我们检查它（https://jsfiddle.net/）
更新：修复html问题后，初始化对话框：
你需要＆＃34;初始化＆＃34;对话框。因此，为每个对话框div添加一个类，如class =＆＃34; dialog＆＃34;，然后在代码中的某处添加：
<script>
var opt = {
autoOpen: false, modal: true, width: 550, height: 650, title: 'Details'
};
jQuery(function () {
jQuery('.dialog').dialog(opt);
})
</script>
或者只是使用$('div#dialog-XXXX').dialog(opt).dialog('open');来调用它，只需记住＆＃34; opt＆＃34;变量定义。
基本上这会告诉对话框如何打开实际的对话框。您可以随意自定义