Javascript 显示包含HTML内容的模式窗口 我正在开发一个小型网站，刚刚开始使用ZURB基金会，并在网页上做了一个基本的网格布局，有大的地铁风格的DIV缩略图~ 10个缩略图。p>
我希望在这里为用户添加交互，即当用户单击这些缩略图时，会出现一个模式窗口，显示有关所单击特定项目的更多信息。有些类似于我们有大量可用的图像库lightbox插件 然而，我想知道从以下两个方面实现同样目标的更好方法是什么。我的模式弹出对话框的内容是否应该在单独的html中，并且我应该在用户单击时通过ajax获取它们？ 或者我应该把这些部分隐藏起来，然后在用户点击时显示出来？ 每个部分都类似于一个项目名称，单击它可以显示项目说明不同的项目可能有视频、图像、说明等Javascript 显示包含HTML内容的模式窗口 我正在开发一个小型网站，刚刚开始使用ZURB基金会，并在网页上做了一个基本的网格布局，有大的地铁风格的DIV缩略图~ 10个缩略图。p>,javascript,jquery,html,css,modal-dialog,Javascript,Jquery,Html,Css,Modal Dialog,我希望在这里为用户添加交互，即当用户单击这些缩略图时，会出现一个模式窗口，显示有关所单击特定项目的更多信息。有些类似于我们有大量可用的图像库lightbox插件 然而，我想知道从以下两个方面实现同样目标的更好方法是什么。我的模式弹出对话框的内容是否应该在单独的html中，并且我应该在用户单击时通过ajax获取它们？ 或者我应该把这些部分隐藏起来，然后在用户点击时显示出来？ 每个部分都类似于一个项目名称，单击它可以显示项目说明不同的项目可能有视频、图像、说明等 无论从上面看哪种方法更好，查看一个关
无论从上面看哪种方法更好，查看一个关于如何显示模式弹出窗口的示例会很好，考虑到它应该最好应用于所有缩略图，而不是为每个缩略图分别执行单独的处理程序。最好的方法是将这些对话框放在单独的文件中，并在用户点击一些东西。这将使事情更容易管理，更有条理 如果将html存储在一个隐藏的div中，这可能会浪费资源，因为用户不会使用该页面加载中的所有对话。您可能也很难使代码保持最新，因为您必须在隐藏的div部分进行更新，如果同时使用这两个部分，则必须在外部文件部分进行更新
我的建议是将所有html放在一个php类/函数中，或者使用一个php MVC框架，并在需要时从那里加载它。这样，您只需要从一个点进行更新，就可以在整个站点上进行更改。对于AJAX加载，加载JSON格式的html，这样您就可以在JSON中添加其他变量，这将使代码更有条理，例如外部脚本、CSS文件和状态指示器 下面是一个独立的示例。运行后，请注意以下事项： 在标记中加载jQuery/jQueryUI库 识别被单击的图像：1在单击img类的元素时触发click事件，2通过jQuery获取特定img的ID 使用AJAX将图像ID发送到PHP处理器文件 PHP处理器文件执行一些操作，并返回结果 AJAX成功函数中接收到来自PHP的结果。使用从PHP接收的数据进行的所有处理都必须在success函数中进行，包括调用JQUI-dlg JQUI-dlg以TEST.PHP中的一个空DIV开始，它在AJAX成功函数中填充了标记：$'dlgID'.htmldata\u从\u PHP收到； 记住在单击OK按钮时关闭JQUI dlg，否则您可以将该命令放在JQUI dlg的close:部分 要运行此简单示例，您需要两个文件： 文件1:TEST.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.img').click(function() {
var iid = $(this).attr('id');
//alert('You clicked ID: ' + iid);
$.ajax({
type: "POST",
url: "yogibear.php", // "source.php",
data: "iid="+iid,
success: function(data) {
//alert('AJAX recd: ' +data);
$('#moddlg').html(data);
$('#moddlg').dialog('open');
} //END success fn
}); //END $.ajax
});
$('#moddlg').dialog({
autoOpen: false,
modal: true,
width: 400, //default is 300
title: 'This is yer dialog:',
buttons: {
'Click Me': function() {
$(this).dialog('close');
}
},
close: function() {
alert('Dlg is closing... I can do more stuff in here, including running another AJAX call');
}
});
}); //END $(document).ready()
</script>
</head>
<body>
<img id="i-1" class="img" src="http://placehold.it/140x100" />
<img id="i-2" class="img" src="http://placehold.it/140x100" />
<img id="i-3" class="img" src="http://placehold.it/140x100" />
<img id="i-4" class="img" src="http://placehold.it/140x100" />
<div id="moddlg"></div>
</body>
</html>
<?php
$x = $_POST['iid'];
die('PHP file recd: ' . $x);
//Of course, this is where you receive the img id sent via AJAX
//and look up stuff in MySQL or etc, then return the results
//simply by putting it all into a variable and ECHOing that
//variable. Or, you can use JSON to echo an array - but make
//sure to look up a couple of examples as you must add another
//couple of params to the AJAX code block
如果你有密码笔或小提琴，得到一些帮助会有帮助。我有一个想法，但不想建立一些内容结构，它可能与您的大不相同。旁边的选择器。。。谢谢