Bootstrap编程式对话框插件bootprompt.js

Bootstrap编程式对话框插件bootprompt.js

bootprompt.js是一款bootstrap编程式对话框插件。该插件为原生的bootstrap提供模态对话框扩展功能,可以以编程的方式实现各种对话框效果,支持bootstrap3和bootstrap4。

使用方法
在页面中引入下面的文件。

1
2
3
4
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootprompt.all.min.js"></script>

HTML结构
最基本的使用方法如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My page</title>
    <!-- CSS dependencies -->
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
    <p>Content here. <a class="show-alert" href=#>Alert!</a></p>
   <!-- JS dependencies -->
    <script src="js/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap 4 dependency -->
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <!-- bootprompt code -->
    <script src="bootprompt.min.js"></script>
    <script src="bootprompt.locales.min.js"></script>
    <script>
        $(document).on("click", ".show-alert", function(e) {
            bootprompt.alert("Hello world!", function() {
                console.log("Alert Callback");
            });
        });
    </script>
</body>
</html>
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论