如何在用户点击关闭图像时关闭Bootstrap模式?

时间:2012-10-01 08:13:16

标签: twitter-bootstrap modal-dialog

我想在用户点击关闭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)

我是在正确的道路上吗?

7 个答案:

答案 0 :(得分:63)

启动模态时,您可以传递选项:

{
  keyboard: false,
  backdrop: 'static'
}

将通过单击背景和转义按钮禁用关闭模式。 或者可以将它们设置为data-属性。

答案 1 :(得分:60)

您可以定义模态行为,定义数据键盘和数据背景。

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

答案 2 :(得分:8)

试试这个

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

答案 3 :(得分:6)

在Jquery中制作它的最佳方法是:

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

HTML中的OR:

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

答案 4 :(得分:2)

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

答案 5 :(得分:1)

您可以使用no-close-背景

<div id="modal" class="modal hide fade in" no-close-on-backdrop no-close-on-keyboard>

答案 6 :(得分:0)

您可以定义模式行为,定义数据键盘和数据背景。

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

此外,它还可以在ASPX页面中使用。