Bootstrap Dialog 使用

自作多情 提交于 2021-02-19 01:47:13

光是bootstrap.min.css 和bootstrap.min.js 还不够。因为Dialog 属于插件。还需要引入bootstrap-dialog.js 和bootstrap-dialog.css

    前者到处都可以下载。后者网上不好找。找了半天nakupanda.github.io/bootstrap3-dialog/ 和 

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

这里两个地方可以下载到例子。里面包含了后面两个文件。然后具体怎么调用dialog就可以看这个网站:

http://nakupanda.github.io/bootstrap3-dialog/

下面是一个简单的例子: 

<!DOCTYPE html>

<html>

<head> 
<meta charset="utf-8" /> 
<title>Bootstrap 实例 - 标签页(Tab)插件</title> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/bootstrap-dialog.css" rel="stylesheet" /> 
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap-dialog.js"></script>
</head>

<body> 
<a href="#" onclick="test()">测试按钮</a>

</body>

<script> 
function test(){ 
    BootstrapDialog.confirm('确认删除当前选中的记录吗?', 
         function(result){ 
             if(result) { 
                 BootstrapDialog.alert('I want 删除!');
             } else { 
                 BootstrapDialog.alert('I want 不删除!');
          } 
     }); 
} 
</script>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!