Как закрыть Bootstrap modal только тогда, когда пользователь нажимает на близкое изображение?

Я хочу закрыть модальный ТОЛЬКО, когда пользователь нажимает на close btn. Как я вижу, мне нужно перезаписать эту часть кода из modal.js:

 hide: function (e) {
    e && e.preventDefault()

    var that = this

    e = $.Event('hide')//if I delete this line modal won't hide

    this.$element.trigger(e)

    if (!this.isShown || e.isDefaultPrevented()) return

    this.isShown = false

    $('body').removeClass('modal-open')

    escape.call(this)

    this.$element.removeClass('in')

    $.support.transition && this.$element.hasClass('fade') ?
      hideWithTransition.call(this) :
      hideModal.call(this)

Я на правильном пути?

Ответы

Ответ 1

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

{
  keyboard: false,
  backdrop: 'static'
}

который отключит закрытие модальности, щелкнув по фону, и кнопку escape. Или они могут быть установлены как атрибуты data-.

Ответ 2

Вы можете определить свое модальное поведение, определяя данные клавиатуры и фона данных.

 <div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

Ответ 3

Попробуйте этот

<div id="myModal" class="modal hide fade in" data-backdrop="static">
<div> </div>
</div>

Ответ 4

Лучший способ сделать это в JQuery:

<script type="text/javascript">
    $('#modal-id').modal({
        backdrop: 'static',
        keyboard: false
    });
</script>

ИЛИ в HTML:

<div id="modal-id" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

Но если вы уже инициализировали модальный, вам нужно отменить событие click вашего модального типа, например:

<script type="text/javascript">
    //this remove the close button on top if you need
    $('#modal-id').find('.close').remove();
    //this unbind the event click on the shadow zone
    $('#modal-id').unbind('click');
</script>

Ответ 5

<script type="text/javascript">
    $('#myModal').modal({
      backdrop: 'static',
      keyboard: false
    })
</script>

Ответ 6

Вы можете определить свое модальное поведение, определяя данные клавиатуры и фона данных.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

И более того, это также работает в ASPX Pages.