Bootstrap modal hide не работает

Ответ 1

Вы используете оба модальных метода переключения: через Javascript и через атрибуты данных. Таким образом, ваш клик запускает модальное шоу с установленными атрибутами данных, а ваш Javascript не влияет на этот триггер.

Просто удалите атрибуты данных и перейдите по методу Javascript:

<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () {
    var a = 4;
    if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
    } else {
        alert("else");
        $('#myModal').modal('hide');
    }
});
</script>

Ответ 2

У меня была такая же проблема, я пробовал много чего, но единственным решением, которое сработало для меня, является @Tang Chanrith, предлагающая удалить отдельные части модального, но немного улучшившись, чтобы поместить назад и полосу прокрутки. Я отвечу только в том случае, если принятый ответ не сработает для них. Извините за мой английский. Надеюсь, я помог.

@Тан Чанрит

Попробуйте эту функцию

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $("#myModal").hide();
}

Улучшение Sollution

Вам просто нужно удалить класс из body и css, который сгенерировал

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $("#myModal").hide();
}

Ответ 3

Попробуйте эту функцию

function hideModal(){
    $("#myModal").removeClass("in");
    $(".modal-backdrop").remove();
    $("#myModal").hide();
}

Ответ 4

Я проверил ваш код. Теперь вы сравниваете == 5., но всегда 4. вам, возможно, придется проверить это, почему вы делаете это сравнение. Также вам нужно удалить цель данных, если вы хотите открыть модальный код из javascript:

<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>

цель данных, непосредственно открывающая модальный. Проверьте, работает ли это.

Ответ 5

попытайтесь добавить return false следующим образом:

$("#buy").click(function () { 
  var a = 4;
  if (a == 5) {
    alert("if");
    $('#myModal').modal('show');
  }
  else {
    alert("else");
    $('#myModal').modal('hide');
  }
  return false;
});

Ответ 6

Вы должны попробовать это $('.modal.in').modal('hide')

Через https://github.com/twbs/bootstrap/issues/489

Ответ 7

У меня есть решение этой проблемы.

$('#landingpage, body').on('click',function(){
    $( ".action-close" ).trigger( "click" );});

Ответ 8

В коде java script вам нужно добавить одну строку кода

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

Ответ 9

У меня была такая же проблема, моя ошибка заключалась в том, что я несколько раз пытался открыть модальное окно. Мы должны проверить, что модальное окно еще не открыто, прежде чем пытаться его открыть.

    if (!($("#MyModal").data('bs.modal') || {})._isShown){ 
        $("#MyModal").modal('show');
    }

Ответ 10

Как я столкнулся, иногда нужно убрать стиль отображения:

style="display: block;"

Ответ 11

Я была такая же проблема. Я попробовал способ JavaScript, предложенный в посте, к сожалению, он работал только половину времени. Если я запускаю мой мод несколько раз, он выходит из строя. В результате я создал способ использования CSS:

/* Hide the back drop*/
.modal-backdrop.show {
    display: none;
}
/* Simulate the backdrop using background color */
.modal-open .modal {
    background-color: rgba(47, 117, 19, 0.3);
}

Ответ 12

Я открывал модальное всплывающее окно, когда я нажимал на ссылку, используя атрибут data-toggle = "modal", который был связан с этой ссылкой, и пытался закрыть ее с помощью javascript, но каждый раз мне не удавалось, поэтому, когда я удаляю "data-toggle" "attribute and" href "из этой ссылки и открыл ее с помощью javascript, затем он корректно закрывался с помощью javascript.

из приведенных ниже нескольких строк кода, вы можете легко понять,

<a href="#CustomerAdvancedModal" data-toggle="modal" class="classShowAdvancedSearch">Advanced Search</a>

Я изменил выше ссылку на что-то ссылку на это

 <a href="#" class="ebiz-Advanced-Search classShowAdvancedSearch">Advanced Search</a>

После этого, когда я пытаюсь закрыть его с помощью JavaScript, я становлюсь успешным

$("#CustomerAdvancedModal").modal('hide');

Ответ 13

У меня также есть та же проблема, где я не могу найти правильное решение для нее.

Позже я заметил, что происходит, когда модал закрывается, когда он работает хорошо.

Три основных свойства:

• Класс modal-open удаляется из тега <body>.
• В теге <body> измените CSS.
• <div> класс modal-backdrop удаляется.

Таким образом, когда вы делаете эти вещи вручную, вы достигнете этого, когда не работает.

Код должен быть следующим в Jquery,

      $('body').removeClass('modal-open');        
      $('body').css('padding-right', '');
      $(".modal-backdrop").remove();
      $('#myModal').hide();

Следовательно, попробуйте это и получите решение.