如何生成 Twitter Bootstrap 模态但将其隐藏

Question

我想创建一个 Twitter Bootstrap 模态，但在我准备好显示之前将其隐藏。

这是要演示的最少代码量。它成功地创建了模式，但它内联应用了 display: block，覆盖了我的样式。

    modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">'
        + '<div class="modal-dialog modal-lg" role="document">'
        + '<div class="modal-content">Hello World</div></div></div>'

    modal = jQuery(modalHtml); 

    modal.modal('show'); 

https://jsfiddle.net/Lx23xqbq/2/

我可以添加这个

modal.modal('hide');

但这允许模态显示一瞬间。

如何在不向用户显示的情况下创建 Twitter Bootstrap 模式？

Answer 1

模态框默认通过 CSS 类 .modal 隐藏。

删除modal.modal( 'show' );。

您的 JS 中有 modal.modal( 'show' );，这会导致模态在您调用 modal.modal( 'hide' ) 之前一瞬间可见。

---

我个人会事先将模态标记放入页面中。

var $button = $('button');
var $modal = $('#myModal');

$modal.on('show.bs.modal', function(e) {

  // Optional. We update the modal with content stored in the data-content
  // attribute of the <button>.
  // You could also grab another hidden element to inject or perform 
  // AJAX here.
  var content = $(e.relatedTarget).data('content');

  $modal
    .find('.modal-content')
    .text(content);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button>

<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">Hello World</div>
  </div>
</div>

注入页面不会有太大的不同。

var html =
  '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">' +
    '<div class="modal-dialog modal-lg" role="document">' +
      '<div class="modal-content">Hello World</div>' +
    '</div>' +
  '</div>';

// Append modal markup to page.
$('body').append(html);

var $button = $('button');
var $modal = $('#myModal');

$modal.on('show.bs.modal', function(e) {

  // Optional. We update the modal with content stored in the data-content
  // attribute of the <button>.
  // You could also grab another hidden element to inject or perform 
  // AJAX here.
  var content = $(e.relatedTarget).data('content');

  $modal
    .find('.modal-content')
    .text(content);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button>

Answer 2

如何创建 Twitter Bootstrap 模式而不将其显示给 用户？

从技术上讲，您已经使用前 2 行代码创建了模式。它直到第三行 (modal.modal('show');) 才显示。

我认为您可能想要完成的是将创建模式的代码与显示/隐藏模式的代码分开。问题（我假设）是您的代码中的其他地方不再引用变量modal（您在modal = jQuery(modalHtml); 中创建），因为它超出了范围。

将此添加到您的 HTML 页面：

<div id="hidden-modal" style="display:none"></div>

如下所述更新您的 Javascript：

modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">'
    + '<div class="modal-dialog modal-lg" role="document">'
    + '<div class="modal-content">Hello World</div></div></div>'

// inject the modal markup into the hidden element on the page
jQuery('#hidden-modal').html(modalHtml);

// whenever ready, retrieve the hidden modal html and display it
jQuery(jQuery('#hidden-modal').html()).modal('show');

https://jsfiddle.net/Lx23xqbq/3/

Answer 3

如果我理解您的问题，这必须有效：

$(document).ready(function () {
  
    draw();
  
});


function draw() {
  var html = ""
  html += '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>';
  html += '<hr />';
  html += '<div id="myModal" class="modal fade" role="dialog">';
  html += '<div class="modal-dialog">';
  html += '<div class="modal-content">';
  html += '<div class="modal-header">';
  html += '<button type="button" class="close" data-dismiss="modal">&times;</button>';
  html += '<h4 class="modal-title">Modal Header</h4>';
  html += '</div>';
  html += '<div class="modal-body">';
  html += '<p>Some text in the modal.</p>';
  html += '</div>';
  html += '<div class="modal-footer">';
  html += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
  html += '</div>';
  html += '</div>';
  html += '</div>';
  html += '</div>';
  
  $('#modal').html(html);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="modal">
</div>

当页面被加载时，函数 draw() 会绘制模式并保持隐藏，直到您单击按钮、超链接、标签或任何您想要的。