<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{height: 500px}
.ceshi{height: 100px;width:300px;background:#f45;}
</style> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.5/js/bootstrap-dialog.min.js"></script> <script>
function oalertq(){
BootstrapDialog.show({
title: 'Default Title1',
message: 'Click buttons below2.',
buttons: [{
label: 'Title 13',
action: function(dialog) {
dialog.setTitle('Title 13');
}
}, {
label: 'Title 24',
action: function(dialog) {
dialog.setTitle('Title 24');
}
}]
});
}
$(function(){
$("<div>hhh</div>").addClass("ceshi").appendTo("body").click(function(){
oalertq()
})
})
</script>
</body>
</html>

a、首先需要引入插件文件,

bootstrap-dialog.min.css  和
bootstrap-dialog.min.js 在jquery和bootstrap的引入前提下

b、此方法封装在了BootstrapDialog对象里面,在相应的地方调用对象的方法即可,比较常用的时show方法,可以传入参数,

连接地址:http://my.oschina.net/xiaoxiangdaizi/blog/486366?p={{page}}

bootstrap-dialog的使用的更多相关文章

  1. bootstrap dialog自行控制窗口的关闭

    在使用dialog的时候,我们通常不希望点击btn的时候自动隐藏dialog,通常需要做一些清理或者ajax操作,在bootstrap dialog中,这是通过 data-dismiss=" ...

  2. bootstrap dialog对话框,完成操作提示框

    1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...

  3. bootstrap dialog 使用模态对话框

    bootstrap3-dialog 使用模态对话框 <div class="modal fade"> <div class="modal-dialog& ...

  4. bootstrap中弹出窗体dialog的自定义

    感谢nakupanda的https://github.com/nakupanda/bootstrap3-dialog 根据需要弹出窗体,但是可以移动,不遮挡下面的内容,所以就修改了源代码,添加了一个属 ...

  5. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  6. 使用bootstrap 弹出效果演示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  7. 黄聪: 50 个 Bootstrap 插件

    Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

  8. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  9. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  10. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

随机推荐

  1. RedHat6.5网卡问题总结

    问题描述:准备用RedHat6.5安装Oracle 12c RAC,系统环境准备好后发现,新版本的RedHat网卡配置跟以前不大一样,总结问题与解决方法如下: 1.找不到eth0文件 在使用RedHa ...

  2. 让乌龟在提交cocos2d-x版本时自动去掉不需要的东东

    引擎版本:2.1.4 ide:vs2012 一般协作开发情况下,有意思无意将bin.obj等一些目录添加到版本管理中是很烦人的事儿,在VS中不断地编译程序集和提交将带来版本暴增问题.如果你用的是乌龟S ...

  3. 论山寨手机与Android 【11】移动网络规范的合纵连横

    上一章我们讨论了SmartPhone BP部分的硬件系统,接下去我们将讨论SmartPhone BP部分的软件系统.所谓BP,指的是基带处理器(Baseband Processor),又称为通讯处理器 ...

  4. 没有产品,没有用户的,绝对不要浪费时间去联系风投——没有过home run的创业人,想办法先做出产品,找到少量用户,没有任何销售成本

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Kuan Huang链接:http://www.zhihu.com/question/19641135/answer/1353 ...

  5. poj1144Network(无向图割点数)

    题目请戳这里 题目大意:给一张无向图,求割点数量. 题目分析:tarjan算法求割点.关于无向图割点,这里说的很清楚了.直接建图跑一遍tarjan算法即可. 详情请见代码: #include < ...

  6. jquery 中 fn.apply(this, arguments)是什么函数?有什么作用?能举个例子吗

    function Person(name){ this.name=name; this.sayname=function (){ alert(this.name); } } function Stud ...

  7. 分布式-在win7上安装linux操作系统

    由于大多数的分布式计算框架.分布式存储系统.分布式平台都支持在unix类似的环境下.所以要做分布式的实验和学习的话,还是推荐装个linux系统.我这里安装的是ubuntu,由于之前装过这个. 一.下载 ...

  8. Java压缩技术的学习

    由于工作的需要,经常要手动去打上线安装包,为了方便,自己写程序去帮助打包.使用过Unix或者Linux的人都基本上都用过tar打包以及gzip压缩,但在Windows下使用得最多的压缩还是RAR和Zi ...

  9. Java基础学习笔记2-循环

    while循环与do while循环: while循环的格式: while(条件表达式) { 执行语句; } do while循环格式: do { 执行语句; } while(条件表达式); do w ...

  10. js数组和对象互转方法

    <script> let arr = [2, 3, 4, 2, 3, 4]; // 数组转化为对象 function toObject(arr) { let obj = { } for(l ...