基于bootstrap的jQuery多功能模态对话框插件
当前位置： >
> 基于bootstrap的jQuery多功能模态对话框插件
这是一款非常实用的基于bootstrap的jQuery多功能模态对话框插件。该bootstrap&jQuery模态对话框集警告框、确认框和对话框于一体。是一款不可多得的多功能、多用途的模态对话框插件。
浏览器兼容性
这是一款非常实用的基于bootstrap的多功能模态对话框插件。该模态对话框集警告框、确认框和对话框于一体。是一款不可多得的多功能、多用途的模态对话框插件。它的主要特点有：
可以通过AJAX直接将调用内容到对话框中。
可以在指定的时间后自动关闭对话框。
可以设置为点击模态背景不关闭对话框。
拥有丰富的回调函数。
该jQuery模态对话框插件有俩个外部依赖：
Bootstrap by Twitter > v2
jQuery library > v1.8
在页面中引入jQuery和jquery-confirm.js以及jquery-confirm.css文件，同时引入bootstrap依赖文件。
&link rel="stylesheet" href="demo/libs/bootstrap.min.css"&
&link rel="stylesheet" href="demo/libs/bootstrap-theme.min.css"&
&link rel="stylesheet" type="text/css" href="css/jquery-confirm.css" /&
&script src="js/jquery.min.js"&&/script&
&script src="demo/libs/bootstrap.min.js"&&/script&
&script type="text/javascript" src="js/jquery-confirm.js"&&/script&
显示对话框：
title: 'Alert!',
content: 'Alert! alert! alert!',
confirm: function(){
alert('the user clicked yes');
显示确认框
$.confrim({
title: 'Confirm!',
content: 'Confirm! Confirm! Confirm!',
confirm: function(){
alert('the user clicked confirm');
cancel: function(){
alert('the user clicked cancel')
注意：$.confirm()和$.alert()方法都是jconfirm()方法的别名。
全局默认参数
jconfirm.pluginDefaults = {
title: 'Hello',
content: 'Are you sure to continue?',
confirmButton: 'Okay',
cancelButton: 'Cancel',
confirmButtonClass: 'btn-default',
cancelButtonClass: 'btn-default',
theme: 'white',
animation: 'scale',
animationSpeed: 400,
confirm: function () {
cancel: function () {
backgroundDismiss: true,
autoClose: false,
closeIcon: true
模态对话框的标题
'Are you sure to continue?'
模态对话框的的内容
模态对话框标题前的小图标
confrimButton
模态对话框确认按钮的文本
cancelButton
模态对话框取消按钮的文本
confirmButtonClass
'btn-default'
模态对话框确认按钮的class
cancelButtonClass
'btn-default'
模态对话框取消按钮的class
模态对话框的颜色主题。
可用选项有 'white' & 'black'
模态对话框的打开/关闭动画
可用选项有 'scale', 'top', 'bottom', 'left', 'right', 'zoom', 'opacity', 'none', 'rotate', 'rotatex', 'rotatey', 'scalex', 'scaley', 'blur'.
animationSpeed
模态对话框动画的持续时间，单位毫秒。
function(){}
当用户点击模态对话框的确认按钮后的回调函数。
function(){}
当用户点击模态对话框的取消按钮后的回调函数。
backgroundDismiss
是否允许用户点击模态对话框以外的区域来改变模态对话框。
如果用户无操作，在指定的时间后关闭模态对话框。
possible option 'confirm|400'
如果所有的按钮都不可用，关闭模态窗口的小图标变为一张图片（dialog模式）。
你可以通过设置icon的值为false来移除它。
在调用$.alert或$.confirm方法时，它们返回一个引用对象，你可以使用该对象来操作模态对话框。
var obj = $.alert({
title: 'Closing this in 2 seconds.',
content: 'Closing me via SetTimeout for demonstration.'
setTimeout(function(){
// some point in future.
obj.close();
本文版权属于jQuery之家，转载请注明出处：
萌码-Advertisement
您已经顶过了哦！bootstrap 模态对话框
1. Bootstrap 模态对话框和简单使用 &div id=&myModal& class=&modal hide fade&&
&div class=&modal-header&&
&button type=&button& class=& ...
http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. Bootstrap m ...
Bootstrap JS插件使用实例(2)-模态对话框 发表于 7 6 ,已有2484次阅读 ,共8个评论 本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js) 先看个简单示例,可直接粘贴运行: view sourceprint? 01.&!DOCTYPE html& 02.&html lang= ...
http://blog.csdn.net/coolcaosj/article/details/ bootstrap的modal中,有一个remote选项,可以动态加载页面到modal-body中 当点击该连接时,userDetail.jsp的内容就可以动态的加载到div.modal-body中.当然这里的连接也可以是action
2 使用脚本
[javascript] view plaincopyprint?
$(&#myModal&).modal({
调用方式 通过data属性 无需编写JavaScript代码即可生成一个对话框.在一个主控元素,例如按钮,上设置data-toggle=&modal&,然后再设置data-target=&#foo& 或href=&#foo& 用以指向某个将要被启动的对话框. &button type=&button& data-toggle=&modal& data-target=&#myM
Bootstrap 模态框和轮播分开使用的教程网上很多.但是两者结合使用的例子和资料很少.两者结合使用时,开始我遇到了不少bug,现在分享给大家. 我的这个例子是把图片轮播嵌入到模态框里. 最后的效果如下图:点击页面上按钮,弹出模态框,模态框里的图片开始轮播,点击旁边空白位置,模态框消失. 代码如下: &!DOCTYPE html& &html& &head& &title&Bootstrap 实例 轮播.模态框&/title& &link
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCompany').modal({backdrop: 'static', keyboard: false}); 参数说明: backdrop 为 static 时,点击模态对话框的外部区域不会将其关闭. keyboard 为 false 时,按下 Esc 键不会关闭 Modal. 就这一行代码解决了我的
http://www.w3cschool.cc/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal ...
一.引言 对话框,是指一个最顶层的拥有标题和边框的弹出窗口,典型地应用于用户进行某种形式的输入操作.在JDK 5.0和早期版本中,构建一个对话框时,它必须拥有一个作为它的所有者窗口的框架窗口或另一个对话框,即使窗口是不可见的.当用户最小化一个可见对话框的所有者窗口时会自动隐藏该对话框;而当用户随后恢复所有者窗口时,该对话框再次出现. 一个对话框可以是无模式的也可以是模式的.除了 ...
模态对话框就是窗体显示出来后就不可以点选位于其下面的对话框,例如在需要选择路径的地方选择浏览后弹出的对话框就是模态对话框. 模态对话框:DoModal创建 EndDialog销毁 非模态对话框:Create创建 DestroyWindow销毁
模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等. 所谓模态对话框就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭.对于非模态对话框,当被打开时,用户既可选择和 该对话框进行交互,也可以选择同应用程序的其他窗口交互. 在Qt中,显示一个对话框一般有两种方式,一种是使用exec()方法,它总是以模态来显示对话框:另一种是使用show()
MFC中对话框有两种形式,一个是模态对话框(model dialog box),一个是非模态对话框(modeless dialog box). 一.模态对话框(model dialog box) 在程序运行的过程中,若出现了模态对话框,那么主窗口将无法发送消息,直到模态对话框退出才可以发送. 点击模态对话框中的OK按钮,模态对话框会被销毁. 创建一个模态对话框的代码: [cpp] view plaincopy //创建一个模态对话框 CTestD td.DoModal(); 其
效果如下: ViewController.h 1 #import &UIKit/UIKit.h& 2 3 @interface ViewController : UIViewController 4 @end ViewController.m 1 #import &ViewController.h& 2 #import &ModalDi ...
1.如果是全局变量CMyDlg g_D解决办法:重载OnCancel OnOk,里边添加 DestroyWindow2.如果是 newCMyDlg* pDlg = new CMyDlg();解决办法:在非模态对话框的PostNcDestroy里
页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:&a href=&index.html& data-transition=&pop&&I'll pop&/a&data-transition 参数表:参数说明slide 从右侧向左滑入页面slideup 从底部向上滑入slidedown 从上向下滑入pop 从中心渐显展开fade 渐显flip 翻转备注:如果想要在目标页面中显示后退按钮,可以在链接中加入 dat
&!DOCTYPE html& &html& &head& &title&Bootstrap 实例 - 模态框(Modal)插件方法&/title& &link href=&/bootstrap/css/bootstrap.min.css& rel=&stylesheet&& &script src=&/scripts/jquery.min.js&&&/sc
用cocos2dx实现模态对话框 /mrblue/(转自于) ui部分使用了cocoStudio,注意这里没有实现怎么屏蔽其他的输入事件,其他的文档已经太多了,我这里使用的cocoStudio的控件自己的特性. 这里强烈推荐一下cocoStudio,虽然现在还有不完善的地方,但是我个人感觉做的很不错了. 下面是代码,编译的时候请开启c ...
在Windows应用程序中,经常使用模态(Model)对话框来和用户进行简单的交互,比如登录框.在IOS应用程序中,有时我们也希望做同样的事情.但IOS的UI库中,没有模态对话框,最接近那个样子的应该算是AlertView.但仅用AlertView,我们只能做文字提示,而不能和用户做交互. 本文将介绍如何基于AlertView做定制,实现模态对话框的功能.以密码修改框为例: 1 ...
声明构造函数为2个参数,具有默认参数的参数须放在后面. CDialogDimmer::CDialogDimmer(CString name,CWnd* pParent /*=NULL*/) : CDialogEx(CDialogDimmer::IDD, pParent) , C_StrDimmerValue(_T(&&)) , C_CircutName(name){ //C_CircutName=} name为要传递的数据 在OnInitDialog()函数中调用Update
MFC中对话框有两种形式,一个是模态对话框(model dialog box),一个是非模态对话框(modeless dialog box).
一.模态对话框(model dialog box) 在程序运行的过程中,若出现了模态对话框,那么主窗口将无法发送消息,直到模态对话框退出才可以发送. 点击模态对话框中的OK按钮,模态对话框会被销毁. 创建一个模态对话框的代码: 1 //创建一个模态对话框 2 CTestD 3 td.DoModal(); 其中CTestDialog
hdu 5123 who is the best? #include&stdio.h& #include&string.h& int main() { int t,n,a[105],i,j,m ...
CPU度量Load Average 1.
概念介绍 1.1
Linux系统进程状态 在 ...
浮点单元(Floating Point Unit,FPU),是用于处理浮点数运算的单元.
用tunnel,tunnel是一种技术称谓,将其放到真正的服务器和客户端之间.调试阶段可以使用webcream运行tomcat作为模拟的真正的服务器. 具体:用apache axis及其项目中的工具tcpmon. 但 ...
4个步骤,将 CocoaPods 导入 Swift1.创建.编辑 Podfile 文件并 pod install2.使用 File -& New -& File- 创建一个 Header File(iOS ...
IT项目如何做好进度管理 出处:[url]http://visualproject.itpub.net/post/[/url] -------------------------------- ...
http://acm./showproblem.php?pid=1233 最小生成树,kruskal算法 1 #include&stdio.h& 2 #include&math. ...
这里使用 Webtatic EL6的YUM源来安装php5.4,我们首页安装Webtatic EL6 YUM源 rpm -Uvh /yum/el6/latest.rpm ...
做文章展示的时候,文章内容由于采用的富文本编辑器,所以里面是带有HTML标签的,这时直接用标签进行输出,例如:&s:property value=&Obj.content& /&HTM ...
本文转载于:http:/blog/static// 按照文件权限模式用-perm选项,按文件权限模式来查找文件的话.最好 ...给bootstrap模态框中的关闭按钮添加事件，alert出的this竟然是链接？
先上图大家会看的清楚一点：&br&这是模态框modal：&br&&img data-rawheight=&547& data-rawwidth=&1043& src=&/49bdea20db64f2d6c805_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1043& data-original=&/49bdea20db64f2d6c805_r.jpg&&这是jquery代码部分：&br&&img data-rawheight=&81& data-rawwidth=&323& src=&/3f6b3bb6114beeecfb19_b.jpg& class=&content_image& width=&323&&这是显示效果：&br&&img data-rawheight=&460& data-rawwidth=&496& src=&/f5abc87eaf87ef8e18ad31_b.jpg& class=&origin_image zh-lightbox-thumb& width=&496& data-original=&/f5abc87eaf87ef8e18ad31_r.jpg&&alert(this)的结果难道不是按钮本身吗？为何出来的是个url？&br&&br&我去撸会源码看看。&br&&br&大神们快发功！！！
先上图大家会看的清楚一点：这是模态框modal：这是jquery代码部分：这是显示效果：…
按投票排序
A元素实现了URLUtils接口，而此接口规定当转换为字符串时返回href的值。
打个断点自己看好吗
首先this肯定是a元素没错的，不信你可以直接console.log(this)在控制台看看，至于为什么alert(this)时直接给出a的href值， 已经解释很清楚了。var a = document.createElement('a');
a.href = "hello";
以上的输出也同理。
var arr = [1,2,3]alert(arr)这里alert出来是还是1,2,3呢，难道arr是个字符串？
就回我一下下呗
你alert出来的实际上是个Object.toString()
已有帐号？
社交帐号登录
无法登录？
社交帐号登录