237

如果我去这里

http://getbootstrap.com/2.3.2/javascript.html#modals

然后单击“启动演示模式”，它会执行预期的操作。我在注册过程中使用模式，并且涉及服务器端验证。如果有问题，我想将用户重定向到显示验证消息的相同模式。目前，除了用户的物理点击之外，我无法弄清楚如何让模式显示。如何以编程方式启动模型？

4

9 回答 9

411

为了手动显示模态弹出窗口，您必须这样做

$('#myModal').modal('show');

您以前需要对其进行初始化，show: false因此在您手动执行之前它不会显示。

$('#myModal').modal({ show: false})

myModal模态容器的 id 在哪里。

于 2012-07-09T23:40:25.383 回答
63

您不应该在触发模态的元素（如按钮）中写入data-toggle="modal" ，并且您可以手动显示模态：

$('#myModal').modal('show');

并隐藏：

$('#myModal').modal('hide');
于 2014-09-29T23:24:11.737 回答
17

如果您正在寻找程序化模态创建，您可能会喜欢这个：

http://nakupanda.github.io/bootstrap3-dialog/

尽管 Bootstrap 的 modal 提供了 modal 创建的 javascript 方式，但您仍然需要先编写 modal 的 html 标记。

于 2013-11-13T06:06:19.950 回答
14

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS

$('button').click(function(){
$('#myModal').modal('show');
});

演示 JSFIDDLE

于 2015-03-13T06:05:50.680 回答
10

您可以通过 jquery (javascript) 显示模型

$('#yourModalID').modal({
  show: true
})

演示：这里

或者您可以删除“隐藏”类

<div class="modal" id="yourModalID">
  # modal content
</div>

​</p>

于 2012-07-09T23:39:45.090 回答
7

这是没有 jQuery 的 Bootstrap v5的代码。

let myModal = new bootstrap.Modal(document.getElementById('myModal'), {});
myModal.show();

演示

这是一个代码框演示，以编程方式在页面加载时打开模式。

https://idu6i.csb.app/

参考文献

于 2021-04-26T04:34:59.700 回答
5

我想这样做angular (2/4)，这就是我所做的：

<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`

需要注意的重要事项：

  • visible是控制模态可见性的组件中的变量（布尔值）。
  • show并且in是引导类。

一个示例组件和html

零件

@ViewChild('rsvpModal', { static: false }) rsvpModal: ElementRef;
..
@HostListener('document:keydown.escape', ['$event'])
  onEscapeKey(event: KeyboardEvent) {
    this.hideRsvpModal();
  }
..
  hideRsvpModal(event?: Event) {
    if (!event || (event.target as Element).classList.contains('modal')) {
      this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'none');
      this.renderer.removeClass(this.rsvpModal.nativeElement, 'show');
      this.renderer.addClass(document.body, 'modal-open');
    }
  }
  showRsvpModal() {
    this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'block');
    this.renderer.addClass(this.rsvpModal.nativeElement, 'show');
    this.renderer.removeClass(document.body, 'modal-open');
  }

html

<!--S:RSVP-->
<div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="niviteRsvpModalTitle">

                </h5>
                <button type="button" class="close" (click)="hideRsvpModal()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary bg-white text-dark"
                    (click)="hideRsvpModal()">Close</button>
            </div>
        </div>
    </div>
</div>
<!--E:RSVP-->
于 2017-10-12T07:49:54.523 回答
3

以下代码可用于在 openModal() 函数上打开模式并在 closeModal() 上关闭：

      function openModal() {
          $(document).ready(function(){
             $("#myModal").modal();
          });
      }

     function closeModal () {
          $(document).ready(function(){
             $("#myModal").modal('hide');
          });  
      }

/* #myModal 是 modal popup 的 id */

于 2018-12-25T15:37:33.237 回答
1

这样的事情我也经历过。我想通过单击表格行来打开 Bootstrap 模式并获取有关每一行的更多详细信息。我使用了一个技巧来做到这一点，我称之为虚拟按钮！兼容最新版本的 Bootstrap (v5.0.0-alpha2)。它也可能对其他人有用。

预览代码片段： https ://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba

概括：

let exampleButton = document.createElement("button");
exampleButton.classList.add("d-none");
document.body.appendChild(exampleButton);
exampleButton.dataset.toggle = "modal";
exampleButton.dataset.target = "#exampleModal";

//AddEventListener to all rows
document.querySelectorAll('#exampleTable tr').forEach(row => {
    row.addEventListener('click', e => {
        //Set parameteres (clone row dataset)
        exampleButton.dataset.whatever = e.target.closest('tr').dataset.whatever;
        //Button click simulation
        //Now we can use relatedTarget
        exampleButton.click();
    })
});

这一切都是为了使用relatedTarget财产。（参见引导文档）

于 2020-10-11T21:45:56.463 回答