如何在Bootstrap模式对话框中显示URL：在按钮上单击

小编典典

如何在Bootstrap模式对话框中显示URL：在按钮上单击

jsp

我必须在模式窗口中加载页面（内部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>

阅读 299

2020-06-08

共1个答案

小编典典

如果要继续沿着引导路径前进，可以在这里看看：jsfiddle-Bootstrap 2.3.2
modal中的远程URI

请注意，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模式文档的相关部分。

2020-06-08