Twitter的引导/ jQuery的 - 如何暂时阻止被关闭的模式？(Twitter Bootst

2019-07-03 21:32发布

站内文章 / 前端开发

45 0

别忘想泡老子

女 | 书童

私信

我使用Twitter的引导情态动词，使用默认选项，您可以单击背景或按[ESC]关闭模式。

然而，当我在模态启动AJAX操作我想以任何方式被封闭停用模式。所以我禁用按钮和隐藏模式的关闭按钮，但我无法弄清楚如何禁用背景和[Esc]键。

我试过了：

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
});

但是，这似乎并没有在飞行工作。

我还需要一次AJAX操作完成后重新启用的背景和键盘。

Answer 1:

注：该解决方案的目标是Twitter的引导2.x的！见这个答案（略低于）根据引导3分歧。

扩展引导模式功能，而无需修改原始来源。

感谢@大卫和他在建议如何扩展Twitter的引导插件，我终于得到它的工作。这是他与情态“锁”的解决方案稍加修改的版本中添加。我张贴它作为一个附加的应答，因为我认为它可能会成为别人的，像我有这个问题用力挣扎的起点。

// save the original function object
var _superModal = $.fn.modal;

// add locked as a new option
$.extend( _superModal.defaults, {
    locked: false
});

// create a new constructor
var Modal = function(element, options) {
    _superModal.Constructor.apply( this, arguments )
}

// extend prototype and add a super function
Modal.prototype = $.extend({}, _superModal.Constructor.prototype, {
    constructor: Modal

    , _super: function() {
        var args = $.makeArray(arguments)
        // call bootstrap core
        _superModal.Constructor.prototype[args.shift()].apply(this, args)
    }

    , lock : function() {
        this.options.locked = true
    }

    , unlock : function() {
        this.options.locked = false
    }

    , hide: function() {
        if (this.options.locked) return
        this._super('hide')
    }
});

// override the old initialization with the new constructor
$.fn.modal = $.extend(function(option) {
    var args = $.makeArray(arguments),
    option = args.shift()

    // this is executed everytime element.modal() is called
    return this.each(function() {
        var $this = $(this)
        var data = $this.data('modal'),
            options = $.extend({}, _superModal.defaults, $this.data(), typeof option == 'object' && option)

        if (!data) {
            $this.data('modal', (data = new Modal(this, options)))
        }
        if (typeof option == 'string') {
            data[option].apply( data, args )
        }
    });
}, $.fn.modal);

利用这种技术它不应该是nessecary改变bootstrap.js，和相同的功能更容易被引导项目之间共享。此方法应该适用于所有其他的引导插件。迄今只有按钮尝试，虽然，但我不能SE为什么它不应该。

看到工作小提琴- > http://jsfiddle.net/Sz7ZS/

Answer 2:

还有一个更简单的方法来做到这一点。这引导拉动请求解释多一点。该解决方案禁用关闭模式（键盘，鼠标点击，关闭按钮）的所有方法。

所有你需要做的禁用关闭模式是：

$('#myModal').data('bs.modal').isShown = false;

再次启用关闭：

$('#myModal').data('bs.modal').isShown = true;

例

下面是与jQuery的GET协同工作，一些示例代码：

// disable closing the modal
$('#myModal').data('bs.modal').isShown = false;

// Send an HTTP GET request to the server - replace this with getJSON, post or ajax as needed
$.get( "ajax/test.html", function( data ) {
  // enable closing the modal
  $('#myModal').data('bs.modal').isShown = true;

  // Do something with the data
  $( ".result" ).html( data );
});

Answer 3:

你是不是谁缺少该功能的唯一的一个。我想举有时候太“简约”，后面的人有想法很多，应在“执行层”来完成，但它是没有用的，当引导jQuery插件本身就不可能！

你必须自己实现的功能，就像这样 ：

在bootstrap.js V2.1.1模态开始于61行。

在Modal.prototype ，增加两个功能， lock和unlock ，所以它看起来像这样（我在这里展示的只是开始modal.prototype ，监守实在是太多了代码）

  Modal.prototype = {

      constructor: Modal

      //add this function
    , lock: function () {
        this.options.locked = true
      }

      //add this function
    , unlock: function () {
        this.options.locked = false
      }

    , toggle: function () {
    ... 
    ...

然后，还Modal.prototype，找到函数hide ，并添加一行，所以它看起来是这样的（同样，只有躲的顶部显示）

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

    var that = this

    //add this line
    if (that.options.locked) return

    e = $.Event('hide')
    ...
    ...

最后，改变$.fn.modal.defaults到：

  $.fn.modal.defaults = {
      backdrop: true
    , keyboard: true
    , show: true
    , locked: false //this line is added
  }

现在，你有你的引导模式上即时锁定/解锁功能，防止用户在关键时刻关闭模式。

例如：

这是“现场演示”的一个修改过的版本从http://twitter.github.com/bootstrap/javascript.html#modals

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" onclick="$('#myModal').modal('lock');">lock</button>
    <button class="btn btn-primary" onclick="$('#myModal').modal('unlock');">unLock</button>
  </div>
</div>
<script type="text/javascript">

我已插入两个按钮，“锁定”和“解锁” - 点击时，它们设置在模态锁定或正常模式（它被初始化与设置）

编辑，你的情况，你就必须做阿贾克斯时锁定/ onlock拨打：

$("myModal").modal('lock');
$.ajax({
    url: url,
    ...
    ...
    , success(html) {
       ...
       ...
       $("#myModal").modal('unlock');
    }
});

Answer 4:

你可以创建一个变量isBlocked可以设置，在做AJAX调用为真，那么你可以检查它bootsrap模式隐藏事件是这样的：

$('#myModal').on('hide.bs.modal', function (e) {
      //Prevent modal from closing is isBlocked is true
      if(isBlocked) return e.preventDefault();
})

我觉得这种方式比延长Bootsrap容易，希望它可以帮助别人：d

Answer 5:

感谢@davidkonrad您这方面的工作。我试图实现这个还有，似乎事情已经自举3.现在，而不是改变：

_superModal.defaults

它现在连接到构造函数，因此你必须做

_superModal.Constructor.DEFAULTS

另外，构造发生了变化，这意味着我不得不将它复制并修改它小于理想。相反，我想出了下面的代码工作，并且不复制构造函数，而且应该更加防呆如果引导改变前进。试试吧：

// save the original function object
var _superModal = $.fn.modal;

// add locked as a new option
$.extend( _superModal.Constructor.DEFAULTS, {
    locked: false
});

// capture the original hide
var _hide = _superModal.Constructor.prototype.hide;
// console.log('HIDE:', _hide);

// add the lock, unlock and override the hide of modal
$.extend(_superModal.Constructor.prototype, {
    // locks the dialog so that it cannot be hidden
    lock: function() {
        // console.log('lock called');
        // console.log('OPTIONS',this.options);
        this.options.locked = true;
    }
    // unlocks the dialog so that it can be hidden by 'esc' or clicking on the backdrop (if not static)
    ,unlock: function() {
        // console.log('unlock called');
        this.options.locked = false;
    }
    // override the original hide so that the original is only called if the modal is unlocked
    ,hide: function() {
        // console.log('hide called');
        if (this.options.locked) return;

        _hide.apply(this, arguments);
    }
});

因此，为了锁定模式：

$('#dlg').modal('lock');

和解锁：

$('#dlg').modal('unlock');

好极了！

Answer 6:

我更新了这个真棒脚本引导4 3.我让这两种情况下，因为我有我用我的项目，一个全球性的脚本，它们中的一些使用这两种版本的自举的工作（不用担心，每个项目有一个自举）。如果任何人有一个更好的主意，请与我们分享。

// save the original function object
var _superModal = $.fn.modal;
// Bootstrap 3: Constructor.DEFAULTS
// Bootstrap 4: Constructor.Default
var _superModalDefault = (typeof _superModal.Constructor.DEFAULTS === 'undefined') ? _superModal.Constructor.Default : _superModal.Constructor.DEFAULTS;

// add locked as a new option
$.extend(_superModalDefault, {
    locked: false
});

// capture the original hide
var _hide = _superModal.Constructor.prototype.hide;
// console.log('HIDE:', _hide);

// add the lock, unlock and override the hide of modal
$.extend(_superModal.Constructor.prototype, {
    // locks the dialog so that it cannot be hidden
    // Bootstrap 3: this.options
    // Bootstrap 4: this._config
    lock: function() {
        // console.log('lock called');
        if (this.options)
            this.options.locked = true;  // Bootstrap 3
        else
            this._config.locked = true;  // Bootstrap 4
    }
    // unlocks the dialog so that it can be hidden by 'esc' or clicking on the backdrop (if not static)
    ,unlock: function() {
        // console.log('unlock called');
        if (this.options)
            this.options.locked = false;  // Bootstrap 3
        else
            this._config.locked = false;  // Bootstrap 4
    }
    // override the original hide so that the original is only called if the modal is unlocked
    ,hide: function() {
        // console.log('hide called');
        if (this.options)
            if (this.options.locked) return;  // Bootstrap 3
        else
            if (this._config.locked) return;  // Bootstrap 4

        _hide.apply(this, arguments);
    }
});

文章来源: Twitter Bootstrap / jQuery - How to temporarily prevent the modal from being closed?