Модальное окно Bootstrap срабатывает дважды при закрытии и повторном открытии

У меня есть модальная форма входа, вызываемая нажатием кнопки. И модальный вызов из внешнего файла с загрузкой ajax. Однако, если я закрою и снова открою модальный. Модальный режим запустится дважды, и появится двойной класс модального фона, и я не могу использовать модальный режим и его функции. Кроме того, я обнаружил, что появляется сообщение консоли: [DOM] Найдено 2 элемента с неуникальным идентификатором #loginForm: .

Я пытаюсь удалить модальный класс, когда модальный скрыт. Однако это не работает.

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

Я хочу запускать только один модальный режим, когда закрываю и снова открываю. Спасибо за вашу помощь.


javascript jquery bootstrap-modal
person shelvey33    schedule 29.06.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте сделать это в JS и, пожалуйста, используйте «родные» параметры, чтобы показать и скрыть модальное окно, также известное как модальное ('toggle').

Мой совет, переместите все модальные окна, кроме содержимого внутри модального тела, в index.php и оставьте форму (#loginForm) в userlogin.php, затем измените свой 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.

person Josep Vidal    schedule 29.06.2019
comment
Спасибо. Однако я использую приведенный выше код и не могу запустить модальное окно. Я добавил функцию оповещения (url), чтобы убедиться, что событие клика срабатывает. Но модальное окно не может быть запущено. - person shelvey33; 29.06.2019
comment
Спасибо за вашу помощь. Ваше предложение поможет мне решить модальную проблему. Тем не менее, это вызывает нажатие кнопки входа в систему как умножение числа. Когда вы впервые открываете модальное окно и нажимаете предупреждение о входе в систему 2 раза, затем 4 раза, 8 раз. Спасибо за помощь. Код обновлен в столбце выше - person shelvey33; 29.06.2019
comment
Я решаю проблему с помощью $('.loginbutton').unbind().click(function(event) . - person shelvey33; 29.06.2019
comment
@ shelvey33 Рад, что помог! Пожалуйста, проголосуйте и отметьте как ответ :) - person Josep Vidal; 29.06.2019

arrow_upward
0
arrow_downward

Вы вызываете модал дважды: с функцией data-toggle и с функцией modal

Попробуйте этот код в своем index.php:

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

И добавьте некоторую проверку, если модальное окно уже загружено на вашу страницу перед вызовом load

person ksiger    schedule 29.06.2019
comment
Спасибо. Я попробовал приведенный выше код и обнаружил, что фон появляется на 1 секунду, а затем сразу же исчезает. - person shelvey33; 29.06.2019