Bootstrap Modal-show不会删除hide属性 [英] Bootstrap Modal - show does not remove hide attribute

问题描述

我正在创建Bootstrap 2.3.1模式，如下所示:

I am creating a Bootstrap 2.3.1 modal as follows:

myModal = $('<div/>', {
   'class': 'modal hide',
   'id': id + '-addModal',
   'tabindex': -1, // needed for escape to work...
   'role': 'dialog',
   'data-backdrop': 'static'
   }).append(content);


// insert Modal into DOM...
$(jqElement).after(myModal);

// focus on first input when it pops up...
myModal.on('shown', function () {
    myModal.find('select:first').focus();
   });

//响应按钮单击... myModal.modal('show');

// in response to button click... myModal.modal('show');

在极少数情况下，会显示背景，但不会显示任何模式.有没有人遇到过类似的问题和解决方法?我知道IE8不喜欢动画模态(使用fade类)，并且这似乎与我们不使用淡入淡出是相同的问题.该问题出现在FF，Chrome和IE中，但就像西班牙宗教裁判所一样，从来没有在我期望的时候出现.

On rare occasions, the backdrop shows, but no modal is displayed. Has anyone encountered a similar problem and a workaround? I am aware IE8 does not like animated modals (use of fade class) and this doesn't appear to be the same issue as we don't use fade. The issue appears in FF, Chrome and IE, but like the Spanish Inquisition, never when I'm expecting it.

失败似乎是在modal('show')执行中.模态似乎存在但并非不被隐藏.我相信应该通过将in类添加到模式中来实现.但是，会发生show和shown事件.通过查看引导程序代码，显示的事件发生的事实意味着该事件不会被阻止为默认行为.

The failure appears to be within the modal('show') execution. It seems that the modal exists but is not unhidden. I believe this should be achieved by adding the in class to the modal. The show and shown events do occur however. From looking at the bootstrap code, the fact that the shown event occurs means that the event is not prevented from default behaviour.

注意:这是一个与我之前发布的问题类似的问题，但是我添加了有关其如何失败的更多信息.

Note This is a question similar to one I posted earlier, but I have added some more information concerning how it fails.

还请注意，我无法更新为引导程序3 .我负责对已经发布的产品进行一些小的更改，而对基础库的更改则是初学者.

Please also note that I cannot update to Bootstrap 3. I am responsible for making small changes to an already released product and a change of basic libraries is a non-starter.

推荐答案

我发现以下问题有所帮助:

I found the following issues helped:

a)模态的显示"操作检查display:block属性并强制对其进行设置.

a) The 'shown' action of the modal checks for a display:block attribute and forces it to be set.

b)将关闭按钮(需要进行验证)设置为click事件-将其更改为委派事件可以使其可靠运行

b) the close button (which needed to do validation) was set to a click event - changing this to a delegated event made it work reliably

c)两个取消按钮都映射到模态关闭动作.

c) both the cancel buttons were mapped to the modal-dismiss action.

myModal.on('show', function (event) {
    self._debug("show modal");

    // show add form - should be a modal
    myModal.find('form')[0].reset();
    myModal.find('.alerts').empty();
    self._debug('show end');
    return true;
});

myModal.on('shown', function () {
    var $el = $('#myModal');
    if ($el.css('display') == 'none') {
       self._debug(" WARNING! modal css error");
    }
    self._debug("fix for bootstrap error");
    $el.css('display', 'block');
    myModal.find('select:first').focus();
    self._debug('Shown modal');
    return true;
 });

myModal.on('hide', function () {
    self._debug('Hide modal');
    return true;
});

myModal.on('hidden', function () {
  var $el = $('#myModal');
  $el.css('display', 'none');
  self._debug('Hidden modal');
  return true;
        });

这篇关于Bootstrap Modal-show不会删除hide属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！