javascript - 如何使用 bootstrap 显示模式对话框

Question

之前我使用 jquery 对话框来显示弹出消息。但是，我需要在我的项目中使用 boostarp，但我无法找到实际显示弹出窗口的方法。我用于 jquery 对话框的代码:

showUserWarningMessage: function (title, message, callback, scope, username) {
    var $dialog = $("#dialog-move-user-warning");
    $dialog.dialog({
        resizable: false,
        height: 450,
        width: 580,
        modal: true,
        top: 200,
        dialogClass: "warning-dialog",
        title: title,
        position: ["center", 200],
        open: function () {
            $dialog.find(".btn-default").on("click", function () {
                $dialog.dialog("close");
            });
            $dialog.find(".btn-primary").on("click", function () {
                $dialog.dialog("close");
                if (callback) {
                    if (scope) {
                        callback.call(scope);
                    } else {
                        callback();
                    }
                }
            });
        },

他正在为 Bootstrap 模式编写代码:

showAlertMessage: function(options) {
     var $dialog = $("#dialog-move-user-warning");
     $dialog.modal("show");        
}

HTML:

<div class="modal fade" id="dialog-move-user-warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                 <h4 class="modal-title" id="myModalLabel">User Info</h4>

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

由于某种原因，它没有在屏幕上显示任何内容，尽管背景被禁用，就像弹出了一个覆盖层一样，但可以看到它。我尝试更改 class="modal" 的默认设置，但没有帮助。我做错了什么，或者叠加层显示还需要什么额外的东西？我需要更改任何 css 吗？提前致谢!

Answer 1

以下是使用 bootstrap 打开模式对话框的多种方法

方法一:使用javascript打开模态窗口

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

方法2:

<button (click)="deleteStudent(item.student_id)" class='btn btn-danger'>Delete</button>&nbsp;

方法3:

<button class='btn btn-success' data-toggle="modal" data-target="#myModalMore">Open</button>

方法4:

<button href="#mypop" class="btn btn-success" data-backdrop="false" data-toggle="modal">Open Modal</button>
<div id="mypop" class="modal fade">
    //modal code here
</div>