如何使用引导程序显示模式对话框

How to show a modal dialog using bootstrap

本文关键字：模式 对话框 显示 引导程序 何使用      更新时间：2023-09-26

早些时候，我使用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需要我换吗？提前感谢！

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

方法1：使用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>

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

1.将模态html添加到页面中

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

2.在页面中添加触发器

数据目标应该等于您的模态ID，在您的情况下，它是#对话框移动用户警告。

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

相关文章：