javascript - jQuery 弹出框未显示

Question

我试图从一个 div 中显示一个弹出框。我的代码如下。

在成功添加记录后，需要显示 div，但它不起作用。我试过 $("#div").html。

脚本:

<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
   $('#users').submit(function() {
      $('#response').html("<b>Adding...</b>");
      $.post('controller_adduser.php', $(this).serialize(), function(data) {
         $('#response').html("<b>Adding...</b>");

         //// Show div Message box

      }).fail(function() {
         alert( "Posting failed." );
      });
      return false;
   });
});
</script>

分区:

<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title"><i class="icon-accessibility"></i> Loading remote path</h4>
            </div>
            <div class="modal-body with-padding">
               <p>Added!!</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-warning" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>

弹出消息框

Answer 1

我看到您正在使用 Bootstrap 。为了显示模态，您需要运行 .modal("show") 命令。我会试试这个: HTML:

<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
   <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title">
                     <i class="icon-accessibility"></i> 
                    <span id="response">Loading remote path</span>
               </h4>
            </div>
            <div class="modal-body with-padding">
               <p>Added!!</p>
            </div>
            <div class="modal-footer">
               <button class="btn btn-warning" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>

JS:

<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
   $('#users').submit(function() {
      $.post('controller_adduser.php', $(this).serialize(), function(data) {
         $('#remote_modal #response').html("<b>Adding...</b>");
         $('#remote_modal').modal("show");
      }).fail(function() {
         alert( "Posting failed." );
      });
      return false;
   });
});
</script>