it-roy-ru.com

Bootstrap модальная шкура не работает

Бутстрап модальная шкура не работает. Оповещение приходит еще. но мой модал не спрятан Добавлен bootply. Моя проблема такая же.

<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" 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">
  <div class="modal-bootstrap-dialog modal-sm">
    <div class="modal-bootstrap-content">
      <div class="modal-bootstrap-body">
        -- content ----
      </div>
    </div>
  </div>
  <div class="modal-bootstrap-footer">
     <button type="submit" class="button primary" data-dismiss="modal">Close</button>
     <button type="submit" class="button primary">Save changes</button>
  </div>
</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>

bootply

20
Sam

Вы используете оба модальных метода переключения: через 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>
25
albertedevigo

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

@Tang Chanrith

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

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

Улучшенное растворение

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

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

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

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

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

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

data-target напрямую открывает модал. Проверьте, работает ли это.

1
Kshitiz

попробуйте добавить возврат false, как это:

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

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

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

1
Feuda

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

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

Я была такая же проблема. Я попробовал способ 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);
}
0
Brenden Stefano

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

style="display: block;"
0
Mahdi Alkhatib

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

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

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

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