对话框/Tips

bootprompt 编程式对话框插件

创客主机

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

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
宝塔
  1. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  2. <script src="js/jquery-1.11.0.min.js"></script>
  3. <script src="js/bootstrap.min.js"></script>
  4. <script src="js/bootprompt.all.min.js"></script>

HTML 结构

最基本的使用方法如下。

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

Gthub 网址:https://github.com/lddubeau/bootprompt

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!