Как отклонить модальный bootstrap? - PullRequest
Новая
       29

Как отклонить модальный bootstrap?

0 голосов
/ 24 февраля 2020

В моем приложении Rails есть контроллер, который вызывает парциальное число js при выполнении определенного условия:

my_controller 

if false == validation_result  
  render :partial => 'my/show_modal.js.erb'
end

_show_modal. js .erb 

$("#modal_content").html("<%= escape_javascript(render 'my/show_modal') %>");
$("#notify").modal('show');

Код html .erb, вызываемый из приведенного выше кода, отображает модальное изображение, как показано ниже:

_show_modal. html .erb 

<div class="modal fade" tabindex="-1" id="notify" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content" style="width:1000px;margin-left:-285px !important;">
      <div class="modal-body">
        <h3 class="modal-title">Please review</h3>
        <span style="float: right">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </span>
      </div>
    </div>
  </div>
</div>

Модальное изображение прекрасно ; но когда я нажимаю на кнопку Ok на модале, модал также хорошо отклоняется, но оставляет светло-серую схему на всей веб-странице (кажется, что веб-страница теряет фокус, и мне приходится обновлять sh страницу, чтобы иметь возможность использовать его снова)!

Что я здесь не так делаю? Как мне полностью закрыть модал, чтобы веб-страницу можно было использовать снова?

ОБНОВЛЕНИЕ:

Я перепробовал почти все подходы, предложенные в , как полностью уничтожить bootstrap модальное окно ? но ни один из них не работает для меня.

Я даже разместил комментарии по нескольким подходам, перечисленным на приведенной выше странице, заявляя, что фон все еще не go для меня.

1 Ответ

0 голосов
/ 25 февраля 2020

Может быть, это очень древний подход, но он должен работать. Назначьте hideModal() функцию на событие клика и посмотрите результат. 

function hideModal() {
    $("#notify").css("display", "none"); // Removing modal container
    $(".modal-backdrop").css("display", "none"); // Removing semi-transparent black background
    $(".modal-open").css("overflow-y", "auto"); // Enabling vertical scrolling back
}
...