Jquery 单击按钮从单独页面加载引导模式

我有一个网页

default.html

包含带有

id=“btn add”

的按钮，另一个网页

addstudents.html

只包含引导模式。单击按钮（

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>

添加学生中的我的模式代码：

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

&时代；
申请人






取消
拯救

在

$的success中嵌套
load（）
时，您试图发出两个ajax请求。ajax

您可以使用

$.get（）

，这是

$.ajax

的简写方法，然后在完成回调中打开模式

我将首先从按钮中删除数据属性，因为引导程序将无法找到目标，因为它不存在

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

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