Question

我正在创建一个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（＆＃39;显示＆＃39）;

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

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

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

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

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

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

Answer 3

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

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

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

中没有<div class="modal fade"类来修复它

Bootstrap Modal - show不会删除hide属性

3 个答案: