[英]How to display content in a modal box with images in that box
Currently i have a detailed page listing containing all links like page.php
contains page.php?id=1, page.php?id=2, page.php?id=3, page.php?id=4..etc
. 目前,我有一个详细的页面清单,其中包含所有链接,例如page.php
包含page.php?id=1, page.php?id=2, page.php?id=3, page.php?id=4..etc
。 Now i want to just provide a preview button on which the on clicking that button without navigating to these pages, i can show the content in a popup/modal box without moving to these pages? 现在,我只想提供一个预览按钮,在该预览按钮上单击该按钮而无需导航到这些页面,我可以在弹出/模式框中显示内容而无需移动到这些页面? I am stuck with this id concept that how can i achieve this. 我坚持这个ID概念,我该如何实现这一目标。 Any source/link is really appreciable. 任何来源/链接都非常可观。
Well you could mix some ajax there there like Stardev says but if you need a simple solution try this Url preview script (Check it please) very clean or lightbox who support iframes. 好吧,您可以在那里像Stardev所说的那样混合一些ajax,但是如果您需要一个简单的解决方案,请尝试使用非常干净的Url预览脚本 (请检查它)或支持iframe的灯箱。 A big list can found here and please check this link to have an idea :) 可以在这里找到一个大列表,请检查此链接以了解一个想法:)
For example if you try ajax i'll be something like this: Jquery: 例如,如果您尝试使用ajax,我将是这样的:Jquery:
$("a").click(function() {
....
$.ajax({
type: "POST",
url: "page.php",
data: "id="+id,
success: function(){
$('#mymodal').html('This is my image'); //Your div
}
}); ....
Prettyphoto HTML Prettyphoto HTML
<href="..." rel="prettyPhoto[ajax]">My image</a>
If you use an iframe solution: 如果您使用iframe解决方案:
<href="..." rel="prettyPhoto[iframe]">My image</a>
I hope it helps! 希望对您有所帮助!
You could perform an AJAX call with jQuery based on the button that is clicked, to load the page inside your dialog: 您可以根据所单击的按钮使用jQuery执行AJAX调用,以将页面加载到对话框中:
$('.previewButton').click(function(){
// determine which page ID to load
// based on the button that was clicked
var pageID = ...;
// fetch the page
$.get('page.php', {page: pageID}, function(data) {
// show the page content inside the dialog
$('.myDialog').html(data);
});
});
For the dialog you could for example use jQuery UI's dialog: http://jqueryui.com/demos/dialog/ 例如,对于该对话框,您可以使用jQuery UI的对话框: http : //jqueryui.com/demos/dialog/
With that plugin you can simply call $(".myDialog").dialog()
to make your <div class="myDialog"></div>
show as a pretty dialog. 使用该插件,您只需调用$(".myDialog").dialog()
即可将<div class="myDialog"></div>
显示为漂亮的对话框。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.