源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

bootstrap3-dialog-master模态框使用详解

  • 时间:2021-09-18 00:53 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:bootstrap3-dialog-master模态框使用详解
 bootstrap3-dialog-master是一款高效,灵活的模态框,此处为基本知识! 1、源码地址 [url=https://github.com/nakupanda/bootstrap3-dialog]https://github.com/nakupanda/bootstrap3-dialog[/url] 2、效果展示 [img]http://files.jb51.net/file_images/article/201708/2017082214031921.png[/img] 3、示例代码 所需引入的js和css
<link rel="stylesheet" type="text/css" href="css/bootstrap-dialog.css" rel="external nofollow" > 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" > 
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <script type="text/javascript" src="js/bootstrap-dialog.js"></script> 
初始化
<button type="button" id="tm" class="btn btn-primary" style="margin: 100px;">
<span class="glyphicon glyphicon-remove" aria-hidden="true">
</span>点我</button> 
 js实现代码
<script > 
    $(function(){ 
           
      $('#tm').on('click',function(){ 
 
            BootstrapDialog.show({ 
              type : BootstrapDialog.TYPE_DANGER, 
              message: '你确定要删除吗?', 
              size : BootstrapDialog.SIZE_NORMAL, 
              buttons: [{ 
              label: '确定', 
              action: function(dialog) { 
              dialog.close(); 
              } 
              }, { 
              label: '取消', 
              action: function(dialog) { 
              dialog.close(); 
              } 
              }] 
            }); 
        })  
     })  
</script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部