用HTML内容显示模式窗口 [英] Show a modal window with HTML content
问题描述
我正在这里开发一个小网站（刚开始使用Zurb Foundation ），并且制作了一个具有大型metro样式div缩略图的基本网格布局（页面上大约10个缩略图）。
我希望为用户添加交互功能，即当用户点击这些缩略图中的任何一个时，模态窗口会显示出有关所点击的特定项目的更多信息上。 （有点类似于我们丰富的图片库灯箱插件）
然而，我想知道从以下两个方面实现相同的更好的方法是什么。我的模式弹出对话框的内容应该在一个单独的HTML中，我应该通过用户的点击通过AJAX获取它们？
或者我应该只隐藏这些部分并在用户点击时显示它们
？
每个部分与项目名称类似，点击它显示项目描述（不同的项目可能有视频，图片，说明等）。
无论上述哪种方法更好，最好查看关于如何显示的示例一个模式弹出窗口（考虑到它应该是最好适用于所有缩略图的东西，而不是为每个缩略图单独分配处理程序）
这是一个独立的例子。在运行它之后，请注意以下几点：
- 在
< head>中加载jQuery / jQueryUI库tags - 通过以下方式识别哪个图像被点击：（1）每次触发
img（2）通过jQuery获取特定的img ID - 使用AJAX将图像ID发送到PHP处理器文件
- PHP处理器文件执行一些操作，并返回结果
- AJAX成功函数中PHP的结果收到。使用接收到的数据进行的所有处理强调>必须发生在成功函数中，包括调用JQUI dlg
- JQUI dlg开始为TEST.PHP中的空DIV，它在AJAX中使用标记成功函数：
$（'＃dlgID'）。html（data_received_from_PHP）; - 当按钮OK时关闭JQUI dlg被点击（否则你可能只是pu t在
关闭命令：> JQUI dlg部分）
运行这个简单的例子，你需要两个文件：
文件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 =stylesheethref =http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css/>
< style>
< / style>
< script type =text / javascript>
$（document）.ready（function（）{
$ b $（'。img'）。click（function（）{
var iid = $（this）.attr （'id'）;
// alert（'您点击了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，//默认为300
title：'This is yer dialog：'，
buttons：{
'Click Me'：function（）{
$（this）.dialog（'close'）;
$ b $，
close：function（）{
alert（'Dlg正在关闭......我可以在这里做更多的事情，包括运行另一个AJAX调用'）;
}
}）;
}）; // END $（document）.ready（）
< / script>
< / head>
< body>
< img id =i-1class =imgsrc =http://placehold.it/140x100/>
< img id =i-2class =imgsrc =http://placehold.it/140x100/>
< img id =i-3class =imgsrc =http://placehold.it/140x100/>
< img id =i-4class =imgsrc =http://placehold.it/140x100/>
< div id =moddlg>< / div>
< / body>
< / html>
文件2：YOGIBEAR.PHP
<？php
$ x = $ _POST ['iid'];
die（'PHP file recd：'。$ x）;
//当然，这是你接收通过AJAX
发送的img id的地方，然后在MySQL或其他地方查找一些东西，然后返回结果
//只需将它全部变成一个变量和ECHOing
//变量。或者，您可以使用JSON来回显数组 - 但是使
//确定查找了几个示例，因为您必须向AJAX代码块
添加另一个
//几个参数
I am developing a small website here (just started using Zurb Foundation) and have made a basic grid layout having large metro style div thumbnails (~10 thumbnails on the page).
I am looking to add the interaction here for the user i.e. when the user clicks on any of these thumbnails, a modal window shows up showing more information about the particular item clicked on. (Somewhat similar to image gallery lightbox plugins that we have abundantly available)
However, I wanted to know what is a better way to achieve the same from the following two. Should the content for my modal popup dialogues be in a separate html and I should be fetching them via ajax on user's click?
Or should I have just have the sections hidden and show them on user's click?
Each of the sections is similar to a project name and clicking on it shows project descriptions (different projects may have videos, images, description etc.)
For whatever the better approach is from the above, it would be great to check out a sample on how to show a modal popup (taking into account that it should be something that could preferably be applied for all the thumbnails and not doing separate individual handlers for each of the thumbnails)
Here is a stand-alone example. After running it, please note the following:
- Loading jQuery/jQueryUI libraries in the
<head>tags - Identifying which image was clicked by: (1) triggering click event any time an element of the
imgclass is clicked, and (2) getting that particular img's ID via jQuery - Using AJAX to send that image ID to the PHP processor file
- PHP processor file does some stuff, and sends back a result
- Result from PHP received in the AJAX success function. All processing using the received data (from PHP) MUST take place inside the success function, including calling the JQUI dlg
- JQUI dlg begins as an empty DIV in TEST.PHP, which is populated with markup inside teh AJAX success function:
$('#dlgID').html(data_received_from_PHP); - Remember to close the JQUI dlg when the button OK is clicked (else you could just put that command in the
close:section of the JQUI dlg)
To run this simple example, you will need two files:
File 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>
File 2: YOGIBEAR.PHP
<?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
这篇关于用HTML内容显示模式窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
