bootstrap-modal开始使用bootstrap-modal


备注

本节概述了bootstrap-modal是什么,以及开发人员可能想要使用它的原因。

它还应该提到bootstrap-modal中的任何大型主题,并链接到相关主题。由于bootstrap-modal的文档是新的,您可能需要创建这些相关主题的初始版本。

安装或设置

Bootstrap Model已经附带了bootstrap.min.js但是为了使它更简单,更容易执行我们需要按照以下步骤操作。

安装: -

只需将以下css和JS添加到您的html页面即可。

<link href =“ https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css "rel =”stylsheet“>

<script src =“ https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js ”type =“text / javascript”/>

要么

您可以从以下链接下载整个包。

https://github.com/nakupanda/bootstrap3-dialog

Bootstrap模式中的简单消息

下面的代码将通过在运行时生成引导模型来向您显示引导模型,而无需编写孔长代码。它还可以创建多个bootstrap模型,即一个很容易。按照下面的简单代码制作简单的bootstrap模型。

将CSS包含在您的代码中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"/>
 

您的模型的HTML代码可以轻松显示

Click Button next to see bootstrap popup with just simple message only.
    <button class="btn btn-primary" type="button" onclick="showModalNow()">Click Me</button>
 

在代码中包含以下脚本,以便轻松地使用bootstrap-model

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js" type="text/javascript" />
<script>
    function showModalNow(){
        BootstrapDialog.show({
            message: 'Hi Apple!'
        });
    }
</script>