Question

目前我有详细的网页列表，其中包含page.php包含page.php?id=1, page.php?id=2, page.php?id=3, page.php?id=4..etc等所有链接。现在我想提供一个预览按钮，点击该按钮而不导航到这些页面，我可以在弹出/模态框中显示内容而无需移动到这些页面？我坚持这个id概念，我怎么能实现这一点。任何来源/链接都非常可观。

Answer 1

那么你可以像Stardev那样在那里混合一些ajax，但是如果你需要一个简单的解决方案，试试这个Url preview script（请检查）非常干净或支持iframe的灯箱。可以找到一个大列表here，请查看此link以获得一个想法：）

例如，如果你尝试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

<href="..." rel="prettyPhoto[ajax]">My image</a>

如果您使用iframe解决方案：

<href="..." rel="prettyPhoto[iframe]">My image</a>

我希望它有所帮助！

Answer 2

您可以根据单击的按钮使用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);
    });
});

对于对话框，您可以使用jQuery UI的对话框：http://jqueryui.com/demos/dialog/

使用该插件，您只需致电$(".myDialog").dialog()即可将<div class="myDialog"></div>节目展示为一个漂亮的对话框。

如何在包含该框中图像的模式框中显示内容

2 个答案: