Bootstrap Modal - 显示不删除隐藏属性答案

【问题标题】：Bootstrap Modal - show does not remove hide attributeBootstrap Modal - 显示不删除隐藏属性
【发布时间】：2014-08-30 07:02:32
【问题描述】：

我正在创建一个 Bootstrap 2.3.1 模态如下：

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');

在极少数情况下，背景会显示，但不显示模式。有没有人遇到过类似的问题和解决方法？我知道 IE8 不喜欢动画模式（使用fade 类），这似乎与我们不使用淡入淡出是同一个问题。这个问题出现在 FF、Chrome 和 IE 中，但就像西班牙宗教裁判所一样，从来没有在我期待的时候出现。

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

注意这是一个与我之前发布的问题类似的问题，但我添加了一些关于它如何失败的更多信息。

还请注意，我无法更新到 Bootstrap 3。我负责对已发布的产品进行小幅更改，而更改基本库是不可能的。

【问题讨论】：

@Elfayer 很好地支持我的问题，以便获得更多关注！ :-)

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

我修改了代码并附加到正文而不是您的示例中指定的未知jqElement。我还添加了一些示例占位符内容。有关工作示例，请参阅以下 JS Fiddle http://jsfiddle.net/kYVtf/5/

var id = 'test',
content = '<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><select><option>TEST</option></select></p></div>  <div class="modal-footer">    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>    </div>';

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


// insert Modal into DOM...
$('body').append(myModal);

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

【讨论】：

非常感谢 - 请更改您的示例以使用 jQuery 1.8.3。
我的示例现在使用 1.8.3。这是您要寻找的结果吗？
我已经解决了，并将我认为发生的事情放在下面。

【解决方案2】：

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

a) 模式的“显示”操作检查 display:block 属性并强制设置它。

b) 关闭按钮（需要进行验证）设置为单击事件 - 将其更改为委托事件使其工作可靠

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

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;
        });

【讨论】：

【解决方案3】：

在我添加以下内容以防止未处理的模式关闭后，我开始发生这种行为。

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

我通过将show: false 添加到模态选项并确保<div class="modal fade" 中没有hide 类来修复它

【讨论】：