如何以编程方式触发引导模式?

小开

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

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

演示:在这里

或者你可以删除hide类

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

小开

最佳答案

为了手动显示弹出的模式，你必须这样做

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

你以前需要用show: false初始化它，所以它不会显示，直到你手动这样做。

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

其中myModal是模式容器的id。

小开

如果你正在寻找一个编程模式的创建，你可能会喜欢这个:

http://nakupanda.github.io/bootstrap3-dialog/ < a href = " http://nakupanda.github.io/bootstrap3-dialog/ " > < / >

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

小开

你不应该在触发模式的元素(比如按钮)中写入data-toggle =“模态”，你可以手动显示模式:

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

和藏在一起:

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

小开

超文本标记语言

<!-- 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

小开

我想用angular (2/4)的方式来做这个，下面是我所做的:

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

请注意的重要事项:

visible是组件中的一个变量(布尔值)，它控制模态的可见性。
show和in是引导类。

组件 &超文本标记语言

组件

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

超文本标记语言

<!--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-->

小开

下面的代码用于在openModal()函数上打开modal，在closemmodal()上关闭modal:

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


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

/* #myModal是modal弹出窗口的id */

小开

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

查看以下代码片段预览: https://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba < / p >

简介:

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属性。(见引导文档)

小开

这是Bootstrap v5不使用jQuery的代码。

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

演示

这是一个以编程方式打开页面加载模式的codesandbox演示。

< img src = " https://i.imgur.com/YJido4g.gif " alt = " / >

< a href = " https://idu6i.csb。app / noreferrer“rel = > https://idu6i.csb.app/ < / >

如何以编程方式触发引导模式?

演示

参考文献