Question

我需要帮助才能使用ajax显示模态。我已经有了我的代码但是当单击该按钮时，模式不会显示。显示淡入淡出但没有出现模态。

这是我的按钮和模态

<button class="btnView" data-target="#myModal" role="button">View Details</button>

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

在，我有这个脚本，它将获取view_modal.php中的内容并将其放入modal-content类中。

$(".btnView").click(function(){
       if(ID!=""){
              $.ajax
              ({
               type: "POST",
               url: "view_modal.php",
               cache: false,
               success: function(html)
               {
                  $(".modal-content").html(html);
               } 
               });
        }else{
            $('.modal-content').html("<div class='modal-header'><button type='button' class='close' id='btnClosemodal' data-dismiss='modal' aria-hidden='true'>&times;</button><h4 class='modal-title' id='myModalLabel'>Select Record</h4></div><br/><center>Please select a record first before clicking view button.</center><br/>");
        }
       $('.modal').modal('show');
    });

这是view_modal.php

<div class="modal-header">
    <button type="button" id="btnClosemodal" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">View Details</h4>
</div>

<div class="modal-body">
    <div id="form1" method="post">
        <div class="modal-body">
            <p>Title:</p>
            <p>Message:</p>
        </div>
        <div class="modal-footer">
            <button id="btnClosemodal" data-dismiss="modal" class="btn btn-danger">CLOSE</button>
        </div>
    </div>
</div>

Answer 1

这是按钮，

<button id="btnAdd" data-toggle="modal" data-target="#myModal" class="btn-group-sm btn-primary" value="Search"><span class="glyphicon glyphicon-plus">Add New</span></button>

这是显示模态的html，

 <div class="modal fade" id="myModal" 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">Modal title</h4>
                </div>
                <div class="modal-body">
                    Name: <input type="text" id="txtName" name="name" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="submit" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

单击按钮时模态不显示

1 个答案: