Javascript 如何以编程方式触发 Bootstrap 模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11404711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I trigger a Bootstrap modal programmatically?
提问by Hoa
If I go here
如果我去这里
http://getbootstrap.com/2.3.2/javascript.html#modals
http://getbootstrap.com/2.3.2/javascript.html#modals
And click 'Launch demo modal' it does the expected thing. I'm using the modal as part of my signup process and there is server side validation involved. If there are problems I want to redirect the user to the same modal with my validation messages displayed. At the moment I can't figure out how to get the modal to display other than a physical click from the user. How can I launch the model programmatically?
然后单击“启动演示模式”它会做预期的事情。我在注册过程中使用模态，并且涉及服务器端验证。如果有问题，我想将用户重定向到显示我的验证消息的相同模式。目前我不知道如何让模态显示，而不是来自用户的物理点击。如何以编程方式启动模型？
回答by Claudio Redi
In order to manually show the modal pop up you have to do this
为了手动显示模式弹出你必须这样做
$('#myModal').modal('show');
You previously need to initialize it with show: falseso it won't show until you manually do it.
您以前需要使用它来初始化它，show: false这样在您手动执行它之前它不会显示。
$('#myModal').modal({ show: false})
Where myModalis the id of the modal container.
myModal模态容器的id在哪里。
回答by nandop
You should't write data-toggle="modal"in the element which triggered the modal (like a button), and you manually can show the modal with:
您不应该在触发模态的元素（如按钮）中写入data-toggle="modal"，您可以手动显示模态：
$('#myModal').modal('show');
and hide with:
并隐藏：
$('#myModal').modal('hide');
回答by nakupanda
If you are looking for a programmatical modal creation, you might love this:
如果您正在寻找编程模式创建，您可能会喜欢这个：
http://nakupanda.github.io/bootstrap3-dialog/
http://nakupanda.github.io/bootstrap3-dialog/
Even though Bootstrap's modal provides a javascript way for modal creation, you still need to write modal's html markups first.
尽管 Bootstrap 的 modal 提供了一种用于创建模态的 javascript 方式，您仍然需要先编写 modal 的 html 标记。
回答by tvshajeer
HTML
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">×</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
JS
$('button').click(function(){
$('#myModal').modal('show');
});
回答by HaNdTriX
回答by Anand Rockzz
I wanted to do this the angular (2/4)way, here is what I did:
我想这样做angular (2/4)，这是我所做的：
<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`
Important things to note:
需要注意的重要事项：
visibleis a variable (boolean) in the component which governs modal's visibility.showandinare bootstrap classes.
visible是组件中控制模态可见性的变量（布尔值）。show并且in是引导类。
Component
成分
@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
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">×</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-->
回答by Rohit Parte
The following code useful to open modal on openModal() function and close on closeModal() :
以下代码可用于在 openModal() 函数上打开模态并在 closeModal() 上关闭：
function openModal() {
$(document).ready(function(){
$("#myModal").modal();
});
}
function closeModal () {
$(document).ready(function(){
$("#myModal").modal('hide');
});
}
/* #myModal is the id of modal popup */
/* #myModal 是模态弹出窗口的 id */
