Question

我希望在我的页面上有一个锚点，当点击时，会显示一个叠加/弹出窗口（我不确定正确的术语 - 我指的是当后台页面得到的时候在弹出/覆盖关闭之前显示为灰色）。

叠加层的内容不应该是静态的，而是从命名的URL中提取。实际上，叠加层充当了另一个URL的窗口

熟悉HTML但没有CSS或Javascript，我欢迎任何建议。

感谢。

Answer 1

如果不了解您的具体设置，很难完全理解您想要完成的任务，但这就是我要做的。

如果您还没有，请查看jQuery。特别是jQueryUI。 jQueryUI具有你想要内置的“弹出”效果（称为“模态”）。实现这些库就像在HTML中包含JavaScript文件一样简单，然后只编写几行JavaScript（jQuery变种）来将必要的JS处理程序附加到DOM。查看“查看源”链接on this page，了解如何设置模式。

一旦你启动并运行，请在api页面上参考jQuery的$ .ajax函数（我不能再添加任何链接或者链接到你）。这里的一般想法是，您将AJAX请求发送到您选择的URL，然后使用JS（或jQuery）将该内容插入您之前为模式设置的内容。插入数据后，您将调用模式打开，现在将具有您通过AJAX请求的内容。

Here's a jsfiddle会向您显示启动并运行所需的最低限度。

$(function() {
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true,
        autoOpen: false
    });

    $(document).on("click", ".load-modal", function(event){
        event.preventDefault();
        $.ajax({
          url: "your_url.php",
          cache: false,
          method: 'post',
          success: function(data){
            $("#dialog-modal").append(data);
          }
        });
        $("#dialog-modal").dialog("open");
    });
});

Answer 2

如果你想要的是一个模态对话框，你可以在不用creating a Bootstrap modal编写任何javascript / CSS的情况下完成此操作，然后只给出一个普通链接另外两个属性：

data-toggle="modal"
data-target="#yourModal"

此解决方案需要Bootstrap。

如何在弹出/覆盖中嵌入其他URL的内容？

2 个答案: