Question

我有以下按钮：

<button data-toggle="tk-modal-demo" data-modal-options="slide-left" data-dialog-options="sidebar sidebar-size-3 sidebar-size-xs-1 sidebar-offset-0 left" class="btn btn-primary">Slide left</button>

调用此模式：

<script id="tk-modal-demo" type="text/x-handlebars-template">
              <div class="modal fade">
                <div class="modal-dialog">
                  <div class="v-cell">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Modal title</h4>
                      </div>
                      <div class="modal-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam atque consequuntur dolore fugiat fugit hic in ipsam iure magnam maxime quaerat, quam qui repellat repellendus temporibus vel vitae voluptate!
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </script>

如何在页面加载时弹出模态而不是按下按钮？换句话说，我打电话给javascript什么？

像tk-modal-demo()？

之类的东西

Answer 1

您可以将类show和in添加到HTML中，如下所示：

<div class="modal fade show in">

或者您可以通过编程方式调用'show'方法

$(".modal").modal("show");

请参阅下面的演示

$(function() {
  /* Or you can invoke the 'show' method programmatically */
  //$(".modal").modal("show");
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<div>content</div>

<!-- Either add the classes 'show' and 'in' to the HTML -->
<div class="modal fade show in">
  <div class="modal-dialog">
    <div class="v-cell">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam atque consequuntur dolore fugiat fugit hic in ipsam iure magnam maxime quaerat, quam qui repellat repellendus temporibus vel vitae voluptate!
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

最简单的选择是将show类添加到模态中：

<script id="tk-modal-demo" type="text/x-handlebars-template">
    <div class="modal show fade">
        <div class="modal-dialog">
          <div class="v-cell">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                 <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Modal title</h4>
              </div>
              <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam atque consequuntur dolore fugiat fugit hic in ipsam iure magnam maxime quaerat, quam qui repellat repellendus temporibus vel vitae voluptate!
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
              </div>
            </div>
          </div>
        </div>
      </div>
</script>

Answer 3

您可以点击按钮使用Javascript：

document.querySelector('button[data-toggle="tk-modal-demo"]').click()

但我强烈建议阅读模态的文档，必须有一个显示/隐藏的功能。例如;如果它是一个Bootstrap模式，你可以这样显示：

$('#tk-modal-demo').modal('show');

要在页面加载时进行调用：

window.addEventListener('load', function() {
  // CODE GOES HERE
});

或者如果你使用jQuery：

$(window).on('load',function() {
  // CODE GOES HERE
});

如何在没有按下按钮的情况下调用javascript模式

3 个答案: