如何在引导模式对话框中显示 URL：单击按钮答案

【问题标题】：How to show a URL in Bootstrap Modal dialog: On button click如何在引导模式对话框中显示 URL：单击按钮
【发布时间】：2013-08-15 17:46:04
【问题描述】：

我必须在模式窗口中加载页面（内部 URL）。我一直在使用 window.showModalDialog(url, null, features) 但这在 Safari、Chrome 上无法正常工作。所以我们决定改用 Bootstrap 的模态对话框。我无法完成这项工作。有什么想法我可能做错了吗？

    //imports
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">


    //activate content as modal
      $(document).ready(function(){
            $('#test_modal').modal({

                });
    }

    .......
    .......

    $("#btnSubmit").click(function(){
     var url = constructRequestURL();
      $('#test_modal').modal(data-remote=url,data-show="true");
    });


    -----
    -----
    <div class="modal fade" id="test_modal">
</div>

【问题讨论】：

你能在现场演示中创建一个 jsfiddle 吗？
是的。这是：jsfiddle.net/CQkYw/3。但是我不能暴露需要加载的内部URL。

标签： jquery jsp twitter-bootstrap modal-dialog

【解决方案1】：

如果您要继续引导路径，可以查看此处：jsfiddle - remote URI in Bootstrap 2.3.2 modal

请注意，该 URL 需要位于同一个域中（尽管您提到它是“内部”），否则您的域需要被远程站点的 Access-Control-Allow-Origin 设置允许。所以请记住，小提琴演示实际上无法从 example.com 加载内容。

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://example.com">Launch modal</button>

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
       <!-- remote content will be inserted here via jQuery load() -->
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

您不需要为此编写任何自定义 JavaScript - Bootstrap 将根据 data-remote="http://example.com/whatever" 和 data-target=" 等数据属性知道要做什么#myModal”等

请参阅Bootstrap modal docs 的相关部分了解更多信息...

编辑：事实证明，动态更改远程 URL 并不像想象的那么容易。希望this answer能进一步帮助您。

【讨论】：

是的。但是直到运行时我才知道数据目标。如何动态设置？
@agentx bootstrap 会解决这个问题。您只需将 url 放入 data-remote 属性中，并让 <div class="modal-body"></div> 为空。引导程序将用 data-remote 中的 url 内容填充正文

【解决方案2】：

或者你可以使用花哨的盒子。它简单而干净。

看这里：http://fancyapps.com/fancybox/3/docs/#ajax

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
AJAX content

【讨论】：