bootbox.js

bootbox:一个弹出框插件,官网看一下例子就好了:http://bootboxjs.com/examples.html

目前来说应该只要调用bootbox.js就可以了,没有css的问题

1.有最基本的调用就是

bootbox.alert("This is the default alert!");

就什么都不做,只要alert一下就已经完成了它的使命,要是只要实现这样的话我觉得完全没必要引入这个插件呀,只要自己alert一下不就好了

2.再加一步就是有回调函数了,callback

 这个好呀

bootbox.alert("This is an alert with a callback!", function(){ console.log('This was logged in the callback!'); });

你对这个弹出框执行了操作,就能做一些你想做的事,恩

3.再深一步就是配置参数咯

  

bootbox.alert({message: "This is an alert with a callback!",callback: function () {console.log('This was logged in the callback!');}
})

跟刚才一样的效果,但是我感觉看起来就会让人很舒服,我们老大一直强调的就是什么,你写的代码不止让你自己看起来舒服,你要让别人看起来也舒服,确实这样很好啊我觉得

4.不止是回调函数,还有可以定义弹出框的size

  

bootbox.alert({message: "This is the small alert!",size: 'small'
});

5.可以添加自定义的className

  

bootbox.alert({message: "This is an alert with an additional class!",className: 'bb-alternate-modal'
});

可以给那个大的div加自定义的类,然后你就可以随意给这个div实现各种css了

6.还有就是点击背景层的时候也可以触发这个弹出框

  

bootbox.alert({message: "This alert can be dismissed by clicking on the background!",backdrop: true
});

是的,就是这个backdrop参数,要是没有设置的话是点击背景层的话是没有反应的

7.还可以在弹出框添加你想要添加的按钮呀,然后利用回调函数来执行一些你想要执行的事

buttons: {"确定": {className: "btn-success",callback: function () {$(obj).parent().parent().find('input').val(selectedImage.id);$(obj).parent().parent().find('img').attr('src', selectedImage.url);selectedImage = {};if (more) {var moreObj = $('#albumsClone').children().first().clone();moreObj.find('input').val('');moreObj.find('img').attr('src', './public/plug/dist/img/noimage.gif');$('#albumsClone').append(moreObj);}}},"取消": {className: "btn-default",callback: function () {}},"删除": {className: "btn-danger",callback: function () {// var delUrl = URL   "Admin/File/delImage/id/"   selectedImage.id;// $.get(delUrl, function (data) {//     var p = $('#dialog-imageUploader .pagination .current').text();//     var pagUrl = URL   "Admin/File/imageUploader/p/"   p;//     $.pjax({//         url: pagUrl,//         container: '.bootbox .bootbox-body',//         push: false,//     });// });// return false;
                        }}
}

这个是可以在弹出框上添加三个按钮,你分别点击这三个按钮的时候可以在每个按钮上添加一个回调函数,

这样你点击的时候就会做出相应的反应

 

这些只是bootbox的alert操作

还有confirm,prompt操作

这个在官网上都有

上面给的那个链接已经很清晰了

然后我就写到这里了

因为我了解到这里就差不多可以了

还有很长的路需要走

继续加油吧

怎么说呢

你也可以说我写的这篇博文对你来说是没有用的,因为网上这种用法一抓一大把

我只是想记录下来我的知识

如果能帮助到别人那就是更好的一件事了

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364436.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android fragment界面滑动切换效果,Android App中使用ViewPager+Fragment实现滑动切换效果...

在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android-support-v4.jar、细节无法控制。不过现在…

相对路径./与../区别

一、基本概念 1、相对路径-顾名思义,相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。 2、绝对路径-绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,比如&#xff0…

nodejs进程异常退出处理方法

1. 捕获uncaughtException process.on(uncaughtException, function (err) {//打印出错误console.log(err);//打印出错误的调用栈方便调试console.log(err.stack); }); 2. 使用守护进程 例如:node-forever的守护和日志记录功能 安装非常容易 [sudo] npm …

关于Java的常见误解

Java是世界上使用最广泛的语言(需要引用),每个人对此都有自己的见解。 由于它是主流,所以通常会嘲笑它,有时是正确的,但有时批评只是不切合实际。 我将尝试解释我最喜欢的5个关于Java的误解。 Java速度很慢…

tomcat中间件的默认端口号_修改tomcat默认端口号8080

修改tomcat端口号端口修改tomcattomcat服务器的默认端口号是80801 只启动一个tomcat的情况当我们不想使用8080端口,需要修改为其他端口时,我们可以:1, 打开tomcat安装目录下的conf目录,找到server.xml文件。找到以下代码connectionTimeout&qu…

我们的爱

对白-什么感觉怎么样?-跟冷风一起-怎么了?-感觉好么?-怎么叫,好不好-时间过的快么?-带他的时候还真不快-呵呵-我想我不用再买月卡了-嘛?-没什么-恩?说-你考虑清楚吧-什么?-我说你俩早上论坛里灌的那么开心呢-.-呵呵-看样子,又要闹革命了-我很冷静-转载于:https://www.cn…

this指向问题

我今天下午本来想做个就是tr鼠标移出之后过三秒把对应的input添加hiddens类 然后我就这样写了 $(.table>tbody>tr).mouseout(function(){var index$(this).index();setTimeout(function(){console.log(index);console.log($(this));$(this).parents(.table).siblings(.c…

shouji android输入法,安卓手机主流输入法对比

什么是合格的输入法?1. 按键布局合理2. 词库丰富且云识别准确3. 文字编辑4. 符号快捷输入5. 翻译功能6. 语音识别转文字对比五款主流输入法:触宝、百度、搜狗、讯飞、QQ均为默认皮肤和设置。1. 按键布局从哪进从哪出,这应该是一个输入法最基本…

DS博客作业06--图

1.本周学习总结 1.思维导图 2.谈谈你对图结构的认识及学习体会。 原本以为树已经够难的了,结果发现觉得太早了。图好难,看不懂。图是由两个集合V和E组成,V指的是顶点的有限集合,E代表两个不同顶点的边的有限集合,图也分…

c 给定字符串中查找_面试 | 查找类算法精析

点击上方蓝字设为星标每周一、三、五上午 8:30 准时推送下面开始今天的学习~前言查找,是使用计算机处理问题时的一个最基本的任务,因此也是算法面试中非常常见的一类问题。很多算法问题的本质,就是要能够高效使用查找。LeetCode 中…

Jiaozi帮忙买的Secret Garden的票拿到了,谢谢Jiaozi

10.7 晚 19:30文化艺术中心大剧院转载于:https://www.cnblogs.com/rexhost/archive/2004/09/28/47608.html

LInux安装MySQL5.7.24详情

安装包下载 MySQL 的官网下载地址:http://www.mysql.com/downloads/ 我安装的是5.7版本 第二步: 选择:TAR (mysql-5.7.24-el7-x86_64.tar) 点击下载 然后点击 No thanks, just start my download. 进行下载。 检查是否安装过mysql [rootmas…

正确设置JUnit测试名称

寻找好名字是手工软件的挑战之一。 您需要随时随地找到它们-类,方法,变量,仅举几例。 但是,什么使名字成为好名字呢? 引用Oncle Bob的话:“三件事:可读性,可读性和可读性&#xff01…

angular学习的一些小笔记(中)之ng-disabled轻松实现按钮是否可点击状态

哇&#xff0c;这个可以轻松实现输入值就按钮可点击&#xff0c;输入框没有值则不可点击的状态呀 看代码 <!doctype html> <html ng-app""> <head><script src"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js&q…

html5储存类型特点,避免踩雷!你不得不知的 HTML5 “新”特性

什么是 HTML5HTML的发展历程如下&#xff1a;产生于1990年1997年 HTML4 出现&#xff0c;成为互联网开发的标准2008年&#xff0c;HTML5正式出现&#xff0c;2002年趋于稳定HTML在发展过程中&#xff0c;HTML4.01 版本维持了长达十年的时间&#xff0c;之后 HTML5 标准才出现&a…

How to show out three rows from the same databand On A4?

How to show out three rows from the same databand On A4? QuotePost by DoraHuang Tue Mar 13, 2018 4:13 am Hello, there are few questions to ask,1. How to present a report from one DataBand to show out three info?My questions like the picture:it is A4 pag…

rds基于什么开发_IaaS、PaaS、SaaS、DaaS都是什么?现在怎么样了?终于有人讲明白了...

导读&#xff1a;本文将详细科普云计算的概念、云服务的发展现状&#xff0c;并逐一介绍各种云服务模式&#xff08;IaaS、PaaS、SaaS、DaaS&#xff09;&#xff0c;建议收藏&#xff01;01 云计算的概念云是一种服务&#xff0c;可以像使用水、电、煤那样按需使用、灵活付费&…

30岁前不要在乎的29件事(转载)

30岁前不要在乎的29件事(转载) 作者&#xff1a; 2004-2-13 20:08:22 原始出处&am…

[转]css实现左侧宽度自适应,右侧固定宽度

原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应&#xff0c;右侧固定宽度&#xff0c;或者左侧宽度固定&#xff0c;右侧自适应。总之就是一边固定宽度&#xff0c;一边自适应宽度。 一般固定宽度是导航栏&#xff0c;自适应宽度…

Java 8发布了! — Lambdas教程

为了庆祝几分钟前发布的Java 8的发布&#xff0c;我正在发布Java 8 Lambdas教程的草稿版本。 这是学习Streams API的一种很好的可视化方法&#xff0c;从第一天开始&#xff0c;它将帮助您开始在自己的应用程序中利用lambda。本文计划在下一期Java Magazine发行中发表&#xff…