jQuery弹出框未显示

时间:2014-11-04 03:27:14

标签: javascript jquery html css

我正在尝试从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:

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

POPUP MSG BOX msgbox

1 个答案:

答案 0 :(得分:2)

我看到你正在使用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>