单击按钮从单独的页面加载 bootstrap 模态

Question

我有一个网页 default.html 包含带 id ="btn-add" 的按钮和另一个页面 add-students.html 仅包含 bootstrap 模式。如何在单击按钮 (btn-add) 时在 default.html 中加载模式。

按钮代码：

        <a href="#" class="btn btn-primary" id="btn-add" style="float:right" data-toggle="modal" data-target="#myModal2" ><span class="glyphicon glyphicon-plus"><strong> Add</strong></span>

第一个在从下一页加载页面时自动加载 table。我对模态做了类似的操作，但没有用。

$(document).on("ready", function () {
            //load student table automatically
                $.ajax({
                    url: "ajax/grid/grid-students.html",
                    success: function (result) {
                        $("#data").html(result);
                    }                     

                });
           //load modal 
                $("btn-add").click(function () {
                    $.ajax({
                        url: "ajax/add/add-students.html", success: function (result) {
                            $(document).load(result);
                        }
                    });
                });



       });

我在 add-students 中的模态代码：

 <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Applicants</h4>
            </div>
            <div class="modal-body">

                <form role="form">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-asterisk"></span></span>
                        <input type="text" class="form-control" placeholder="ID" aria-describedby="basic-addon1" required>
                    </div><br />
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>
                        <input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1" required>
                    </div><br />
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-envelope"></span></span>
                        <input type="email" class="form-control" placeholder="Email" aria-describedby="basic-addon1" required>
                    </div><br />
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-earphone"></span></span>
                        <input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1" required>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>

            </div>

        </div>
    </div>
</div>

Answer 1

当您在 $.ajax

的 success 中嵌套 load() 时，您正在尝试发出 2 个 ajax 请求

您可以使用 $.get() 执行此操作，这是 $.ajax 的 shorthand 方法，然后在完成回调中打开模式。

我会先从按钮中删除数据属性，因为 bootstrap 将无法找到目标，因为它不存在。

// note invalid selector for button in your code
$("#btn-add").click(function () {
    // get needed html
    $.get("ajax/add/add-students.html", function (result) {
        // append response to body
        $('body').append(result);
        // open modal
        $('#myModal2').modal(/* options object here*/);

    });
});

您可能还想在每次加载模态元素之前检查它是否存在 html，因为 ID 必须是唯一的

您可以使用以下内容进行检查：

if(!$('#myModal2').length){
  // load html and open new modal
}else{
   // just open modal...see docs
}

单击按钮从单独的页面加载 bootstrap 模态

Load bootstrap modal from seperate page on button click

html

ajax

jquery

twitter-bootstrap

bootstrap-modal