bootstrap-dialog的使用
<!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的使用的更多相关文章
- bootstrap dialog自行控制窗口的关闭
在使用dialog的时候,我们通常不希望点击btn的时候自动隐藏dialog,通常需要做一些清理或者ajax操作,在bootstrap dialog中,这是通过 data-dismiss=" ...
- bootstrap dialog对话框,完成操作提示框
1. 依赖文件: bootstrap.js bootstrap-dialog.js bootstrap.css bootstrap-dialog.css 2.代码 BootstrapDialog.co ...
- bootstrap dialog 使用模态对话框
bootstrap3-dialog 使用模态对话框 <div class="modal fade"> <div class="modal-dialog& ...
- bootstrap中弹出窗体dialog的自定义
感谢nakupanda的https://github.com/nakupanda/bootstrap3-dialog 根据需要弹出窗体,但是可以移动,不遮挡下面的内容,所以就修改了源代码,添加了一个属 ...
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- 使用bootstrap 弹出效果演示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- 黄聪: 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
随机推荐
- php数字转中文
function number2Chinese($num, $m = 1) { switch($m) { case 0: $CNum = array( array('零','壹','贰','叁','肆 ...
- In Depth : Android Shutdown Sequence
What happened when I long press power button ?What is shutdown sequence ?How is it different from de ...
- 01UITextField基础知识
文字属性 文字属性包括:text; placeholder(默认使用70%灰色):font:textColor;textAligment. 文字大小 文字大小包括:adjustsFontSizeToF ...
- Oracle EBS-SQL (WIP-10):检查车间任务状态“完成”但未发料数据.sql
select WE.WIP_ENTITY_NAME 任务号, MFG_LOOKUPS_WJS ...
- Java - 字符串和Unicode互转 - 解析小米pm.min.js
小米JS地址: http://p.www.xiaomi.com/zt/20130313/huodong/pm.min.js 上面这个JS是小米抢手机页面的代码.和抢手机有直接关联.. 虽然我3次都没抢 ...
- LINQpad 用法汇总
// C# Expression //Courses // .Join ( // CourseSections, // course => course.CourseId, // section ...
- 海康威视研究院ImageNet2016竞赛经验分享
原文链接:https://zhuanlan.zhihu.com/p/23249000 目录 场景分类 数据增强 数据增强对最后的识别性能和泛化能力都有着非常重要的作用.我们使用下面这些数据增强方法. ...
- Android UI ActionBar功能-启动ActionBar
官方帮助文档:http://wear.techbrood.com/training/basics/actionbar/index.html ------------------------------ ...
- 9大理由告诉你为什么应该学习HTML跟CSS
你是不是听过太多人告诉你:「人人都应该要会 coding!」都快要不耐烦了对吧? 究竟为什么身为一个行销专业者.作家.金融巨擘--,整个世界还要你学会 coding? 事实上仅仅要对 HTML.CSS ...
- [ACM] hdu 2191 珍惜如今,感恩生活 (多重背包)
Problem Description 急!灾区的食物依旧短缺! 为了拯救灾区同胞的生命,心系灾区同胞的你准备自己採购一些粮食支援灾区,如今如果你一共同拥有资金n元,而市场有m种大米,每种大米都是袋装 ...