如何在Bootstrap Modal对话框中显示URL:在按钮上单击 [英] How to show a URL in Bootstrap Modal dialog: On button click

问题描述

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

I have to load a page (internal URL) in a modal window. I had been using window.showModalDialog(url, null, features) but this does not work properly on Safari,Chrome. So we decided to use Bootstrap's modal dialog instead. I'm unable to make this work. Any ideas what I could be doing wrong?

    //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>

推荐答案

如果您要继续沿着引导路径前进，可以在此处查看:

If you're going to continue down the bootstrap path, you could take a look here: jsfiddle - remote URI in Bootstrap 2.3.2 modal

请注意，URL必须位于相同的域(尽管您提到的是内部")，否则，远程站点的Access-Control-Allow-Origin设置将允许您的域.因此请记住，小提琴演示实际上无法从example.com加载内容.

Note that the URL will need to be on the same domain (though you mentioned it is "internal") or your domain will need to be allowed by the remote site's Access-Control-Allow-Origin settings. So keep in mind that the fiddle demo can't actually load content from 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"等.

You don't need to write any custom JavaScript for this - Bootstrap will know what to do based on the data-attributes like data-remote="http://example.com/whatever" and data-target="#myModal" etc.

有关更多信息，请参见 Bootstrap模式文档的相关部分. ..

See the relevant section of the Bootstrap modal docs for more info...

事实证明，动态更改远程URL并不那么容易.希望此答案会为您提供进一步的帮助.

It turns out that changing the remote URL dynamically isn't as easy as it could be. Hopefully this answer will help you further.

这篇关于如何在Bootstrap Modal对话框中显示URL:在按钮上单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！