Javascript 如何在使用ajax单击按钮时打开模式窗体

这是我目前在“dir.php”上看到的内容。这里必须发生的是，单击add按钮后，模态表单应该显示出来。请检查我的代码，告诉我解决方案是什么？谢谢

<a class="btn btn-primary btn-md btnAdd" role="button"><i class="fa fa-plus" aria-hidden="true"></i>Add</a>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
            {
                $(".btnAdd").click(function(){
                    $.ajax({
                        url: "modal.php",
                        success: function(returndata){
                              $('#myModal').modal('show');
                        },
                        dataType: "html"
                    });
                });


            });
</script>

添加
$（文档）.ready（函数（）
{
$（“.btnAdd”）。单击（函数（）{
$.ajax({
url:“modal.php”，
成功：函数（返回数据）{
$（'myModal'）.modal（'show'）；
},
数据类型：“html”
});
});
});

在“modal.php”中包含模态形式

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title" id="myModalLabel">Add</h4>
            </div>

            <div class="modal-body">
                <div id="form1" action="" method="post">
                    <div class="modal-body">
                        <label class="control-label">Name</label>
                        <input type="text" class="form-control" name="name1" />
                        <label class="control-label">Branch Address</label>
                        <input type="text" class="form-control" name="bAddress1" />
                        <label  class="control-label">Officer-in-Charge</label>
                        <input type="text" class="form-control" name="officer1" />
                        <label  class="control-label">Contact Number</label>
                        <input type="text" class="form-control" name="contactN1" />
                    </div>
                    <div class="modal-footer">
                        <input id="submit" type="submit" value="SUBMIT" class="btn" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

x
添加
名称
分支机构地址
主管官员
联系电话

试着放：

<div id="myModal" ...></div>

进入

成功：

方法。

编辑dir.php代码：

    <a class="btn btn-primary btn-md btnAdd" role="button"><i class="fa fa-plus" aria-hidden="true"></i>Add</a>
    <style type="text/css">
        #myModal {
            display: none;
        }
    </style>
    <!-- add div for show data  -->
       <div id="myModal">

       </div>
    <!-- end -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
                {
                    $(".btnAdd").click(function(){
                        $.ajax({
                            url: "modal.php",
                            success: function(returndata){
                                  // $('#myModal').modal('show');

                                     $('#myModal').html(returndata);
                                     $('#myModal').modal('show');
                            },
                            dataType: "html"
                        });
                    });


                });
    </script>

添加
#myModal{
显示：无；
}
$（文档）.ready（函数（）
{
$（“.btnAdd”）。单击（函数（）{
$.ajax({
url:“modal.php”，
成功：函数（返回数据）{
//$（'myModal'）.modal（'show'）；
$（'#myModal'）.html（返回数据）；
$（'myModal'）.modal（'show'）；
},
数据类型：“html”
});
});
});

尝试将您的代码添加到jsfiddle.net，并将链接包含在您的问题中，以便有兴趣回答您的问题的人可以更轻松地检查代码。您的ajax功能工作正常吗？您的$（“.btnAdd”）单击应该包含模式显示，而不是ajax请求尝试执行类似的操作。

$（.btnAdd”）。单击（函数（）{$（'#myModal'）.modal（'show'）；}）

您在控制台中看到任何错误吗？您可以创建demo ni JSFIDLE吗？您没有从modal.php获得任何动态数据，为什么不直接将html插入dir.php，并使用javascript显示它呢。

    <a class="btn btn-primary btn-md btnAdd" role="button"><i class="fa fa-plus" aria-hidden="true"></i>Add</a>
    <style type="text/css">
        #myModal {
            display: none;
        }
    </style>
    <!-- add div for show data  -->
       <div id="myModal">

       </div>
    <!-- end -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
                {
                    $(".btnAdd").click(function(){
                        $.ajax({
                            url: "modal.php",
                            success: function(returndata){
                                  // $('#myModal').modal('show');

                                     $('#myModal').html(returndata);
                                     $('#myModal').modal('show');
                            },
                            dataType: "html"
                        });
                    });


                });
    </script>