如何以编程方式触发Bootstrap模式？

Question

如果我去这里

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

然后点击"启动演示模式"它会完成预期的操作.我正在使用模式作为我的注册过程的一部分,并且涉及服务器端验证.如果有问题,我想将用户重定向到同一模式,并显示我的验证消息.目前我无法弄清楚除了来自用户的物理点击之外如何显示模态.如何以编程方式启动模型？

Answer 1

要手动显示模式弹出窗口,您必须执行此操作

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

您之前需要初始化它,show: false因此在您手动执行之前它不会显示.

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

myModal模态容器的id 在哪里.

Answer 2

你不应该在触发模态的元素中写入data-toggle ="modal"(如按钮),你可以手动显示模态:

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

并隐藏:

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

Answer 3

这是没有 jQuery的 Bootstrap v5 代码。

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

演示

这是一个Codesandbox演示，用于以编程方式在页面加载时打开模式。

https://idu6i.csb.app/

参考文献

• https://getbootstrap.com/docs/5.0/components/modal/#via-javascript
• https://getbootstrap.com/docs/5.0/components/modal/#show

Answer 4

如果您正在寻找一个程序化的模态创建,您可能会喜欢这个:

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

即使Bootstrap的模态为模态创建提供了一种javascript方式,你仍然需要先编写模态的html标记.

Answer 5

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

DEMO JSFIDDLE

Answer 6

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

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

演示:这里

或者你可以删除"隐藏"类

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

​

Answer 7

我想这样做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-->