Question

我有一个通过单击按钮调用的登录表单模式。模态是从外部文件以ajax加载调用的。但是，如果我关闭并重新打开模态。模态将启动两次，并且将出现双模态背景类，并且我无法使用模态和功能。另外，我发现控制台消息出现：[DOM]找到2个具有唯一ID #loginForm：的元素。

当模态隐藏时，我尝试tp删除模态类。但是，它不起作用。

// jquery

$('a.login').click(function(event) {
  var url = "userlogin.php";
  $('.login-container').load(url,function(result){
      $('#modalLoginForm').modal({show:true});

        });

});

$("#modalLoginForm").on("hidden.bs.modal", function () {
  resetMyForm();
  $("#modalLoginForm").remove();
});

$('.loginbutton').click(function(event) {
// prevent the default submit
alert("haha");
event.preventDefault();
var form = $('#loginForm');
//alert(form);
$.ajax({
    url: "authentication.php", 
    type: "POST",
    // use the forms data
    data: form.serialize(),
    beforeSend: function() {    
        console.log( "Processing..." );
    },
    success: function( response ){
        // do sth with the response

        if(response == "OK") {
           // credentials verified
           // redirect

         location.reload();
        }else{
           // credentials incorrect
           // append errormessage to modal
          form.closest('.modal-body').append('<div class="error text- 
          danger">*'+response+'</div>');

          }
          },
    error: function( response ) {
       console.log(response);
    }

    });
    return false;
    });

// index.php

 <a href="" class="btn btn-secondary btn-rounded login" data- 
 toggle="modal">Login</a>
<div class="login-container"></div>

// userlogin.php

    <div class="modal fade" id="modalLoginForm" tabindex="-1" 
    role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content bg-light">
    <div class="modal-header bg-dark">
    <h4 class="col-sm-12 text-center text-white comp ">Sign in</h4>
    </div>
    <div class="modal-body mx-3">
  <div class="container">
  <div class="col-sm-12">
  <form id="loginForm"  method="post">
    <div class="md-form mb-5">
      <i class="fas fa-envelope prefix grey-text"></i>
      <label data-error="wrong" data-success="right" 
     for="defaultForm-email">Username:</label>
     <input type="text" name="username" class="form-control validate">
    </div>

    <div class="md-form mb-4">
      <i class="fas fa-lock prefix grey-text"></i>
       <label data-error="wrong" data-success="right" 
     for="defaultForm-pass">Password:</label>
     <input type="password" name="password" class="form-control validate">

      </div>
    </div>
    <form>
 </div>
  </div>
  <div class="modal-footer d-flex justify-content-center bg-primary">
    <button type="submit" class="btn btn-default text-white comp 
   loginbutton">Login</button>
   </div>
   </div>
   </div>
   </div>

   <script src="js/modal.js"></script>

我想在关闭并重新打开时仅启动一个模式。感谢您的帮助。

Answer 1

您两次调用模式：使用data-toggle和modal函数

在您的index.php中尝试以下代码：

<a href="" class="btn btn-secondary btn-rounded login">Login</a>
<div class="login-container"></div>

如果在调用load

之前该模式已加载到您的页面，请添加一些验证

Answer 2

尝试在JS中这样做，请使用“本机”选项显示和隐藏模态aka模态。（'toggle'）

我的建议是，将模态主体内除内容之外的所有模态移动到index.php，并在userlogin.php中保留形式（#loginForm），然后为该代码更改您的JavaScript：

$('a.login').click(function(event) {
  var url = "userlogin.php";
  $('#modalLoginForm').find('.modal-body').load(url)
  $('#modalLoginForm').modal('toggle');
});

$("#modalLoginForm").on("hidden.bs.modal", function () {
  resetMyForm();
});

有时候，当模式显示重复或直接不起作用时，是因为jQuery或Boostrap导入顺序错误或重复，但是在您的情况下，我认为这只是JavaScript错误。

关闭并重新打开时，Bootstrap模式会触发两次

2 个答案: