Bootstrap Modal – show不会删除hide属性

我正在创建一个Bootstrap 2.3.1模式，如下所示：

myModal = $('
', { '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中，但与西class牙宗教裁判所一样，从来没有我期待它。

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

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

另请注意，我无法更新到Bootstrap 3 。 我负责对已发布的产品进行小的更改，而基础库的更改则不是首发。

Answer 1

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

 var id = 'test', content = '
×
Modal header
TEST
 
 Close 
'; var myModal = $('
', { '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(); }); 

Answer 2

我发现以下问题有帮助：

a）模态的“显示”动作检查display:block属性并强制设置它。

b）关闭按钮（需要进行validation）设置为单击事件 – 将其更改为委派事件使其可靠地工作

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

Answer 3

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

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

我通过将show: false添加到模态选项并确保

没有hide类来修复它