引导模式显示不会移除隐藏属性

Bootstrap Modal - show does not remove hide attribute

本文关键字：隐藏 属性 模式 显示      更新时间：2023-09-26

我正在创建一个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();
   });

//响应button click…myModal.modal("秀");

在极少数情况下，显示背景，但不显示模式。有人遇到过类似的问题和解决方法吗?我知道IE8不喜欢动画模态(使用fade类)，这似乎不是我们不使用淡出的相同问题。这个问题出现在FF, Chrome和IE，但像西班牙宗教裁判所，从来没有当我期待它。

故障出现在modal('show')执行过程中。模态似乎是存在的，但并没有被揭示出来。我相信这应该通过将in类添加到模态来实现。然而，show和shown事件确实发生了。从引导代码来看，所示事件发生的事实意味着没有阻止该事件的默认行为。

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

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

我修改了代码并将其附加到正文中，而不是在示例中指定的未知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();
});

我发现以下问题有帮助:

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

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

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

我通过将show: false添加到模态选项并确保在<div class="modal fade"

中没有hide类来修复它
相关文章：