<!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. php数字转中文

    function number2Chinese($num, $m = 1) { switch($m) { case 0: $CNum = array( array('零','壹','贰','叁','肆 ...

  2. In Depth : Android Shutdown Sequence

    What happened when I long press power button ?What is shutdown sequence ?How is it different from de ...

  3. 01UITextField基础知识

    文字属性 文字属性包括:text; placeholder(默认使用70%灰色):font:textColor;textAligment. 文字大小 文字大小包括:adjustsFontSizeToF ...

  4. Oracle EBS-SQL (WIP-10):检查车间任务状态“完成”但未发料数据.sql

    select WE.WIP_ENTITY_NAME                                               任务号,         MFG_LOOKUPS_WJS ...

  5. Java - 字符串和Unicode互转 - 解析小米pm.min.js

    小米JS地址: http://p.www.xiaomi.com/zt/20130313/huodong/pm.min.js 上面这个JS是小米抢手机页面的代码.和抢手机有直接关联.. 虽然我3次都没抢 ...

  6. LINQpad 用法汇总

    // C# Expression //Courses // .Join ( // CourseSections, // course => course.CourseId, // section ...

  7. 海康威视研究院ImageNet2016竞赛经验分享

    原文链接:https://zhuanlan.zhihu.com/p/23249000 目录 场景分类 数据增强 数据增强对最后的识别性能和泛化能力都有着非常重要的作用.我们使用下面这些数据增强方法. ...

  8. Android UI ActionBar功能-启动ActionBar

    官方帮助文档:http://wear.techbrood.com/training/basics/actionbar/index.html ------------------------------ ...

  9. 9大理由告诉你为什么应该学习HTML跟CSS

    你是不是听过太多人告诉你:「人人都应该要会 coding!」都快要不耐烦了对吧? 究竟为什么身为一个行销专业者.作家.金融巨擘--,整个世界还要你学会 coding? 事实上仅仅要对 HTML.CSS ...

  10. [ACM] hdu 2191 珍惜如今,感恩生活 (多重背包)

    Problem Description 急!灾区的食物依旧短缺! 为了拯救灾区同胞的生命,心系灾区同胞的你准备自己採购一些粮食支援灾区,如今如果你一共同拥有资金n元,而市场有m种大米,每种大米都是袋装 ...