Question

这就是我目前所拥有的＆＃34; dir.php＆＃34;。这里必须发生的是，点击添加按钮后，模态表单应该显示出来。请您查看我的代码并告诉我解决方案是什么？谢谢！

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

and on＆＃34; modal.php＆＃34;包含模态形式

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

Answer 1

尝试推杆：

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

进入 dir.php ，然后尝试添加：

$('#myModal').html(returndata);
$('#myModal').modal('show');

进入success:方法。

Answer 2

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

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

2 个答案: