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();
                    }
                }
            });
        },

他为自编模式编写代码：

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

以下是使用引导程序打开模式对话框的多种方法

方法1：使用javascript打开模式窗口

2.2 GHz Quad-Core Intel Core i7

方法2：

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

方法3：

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

方法4：

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

Answer 2

如果要使用Bootstrap显示模态，为什么不使用Bootstrap？

<强> 1。将模态html添加到您的页面。

您提供的模式html是有效的，如果您不确定，可以在此处找到确切的代码和更多示例：http://getbootstrap.com/javascript/#modals-examples

<强> 2。在页面中添加触发器。

数据目标应该等于你的模态ID，在你的情况下是＃dialog-move-user-warning。

    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     Launch demo modal
    </button>

第3。确保您的网站上包含bootstrap.js和bootstrap.css。

Bootstrap模式在很大程度上依赖于bootstrap.js。你不需要所有东西，你在下面的JSFiddle中找到的就足够了。

http://jsfiddle.net/fgxmcnd2/3/

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

2 个答案: