【转】bootbox自定义dialog、confirm、alert样式，以及基本设置方法setDefaults中可用参数
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bootbox自定义dialog、confirm、alert样式，基本全局设置方法setDefaults</title>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.btn-myStyle{ background-color: #2c3e50; color:#fff}
.btn-myStyle:hover,.btn-myStyle:focus{color:#fff;text-decoration: none;}
</style>
</head>
<body>
<button id="test" class="btn btn-default">测试</button>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://bootboxjs.com/bootbox.js"></script>
<script>
$(document).ready(function() {
//bootbox.setDefaults({
/**
* @optional String
* @default: en
* which locale settings to use to translate the three
* standard button labels: OK, CONFIRM, CANCEL
*/
//locale: "fr",
/**
* @optional Boolean
* @default: true
* whether the dialog should be shown immediately
*/
//show: true,
/**
* @optional Boolean
* @default: true
* whether the dialog should be have a backdrop or not
*/
//backdrop: true,
/**
* @optional Boolean
* @default: true
* show a close button
*/
//closeButton: true,
/**
* @optional Boolean
* @default: true
* animate the dialog in and out (not supported in < IE 10)
*/
//animate: true,
/**
* @optional String
* @default: null
* an additional class to apply to the dialog wrapper
*/
//className: "my-modal"
//});
}); $(document).on("click", "#test", function (e) {
/*bootbox.confirm("Hello world!", function (result) {
if(result) {
alert('点击了确认按钮');
} else {
alert('点击了取消按钮');
}
});
bootbox.dialog({
message: "I am a custom confirm",
title: "Confirm title",
buttons: {
Cancel: {
label: "Cancel",
className: "btn-default",
callback: function () {
alert("Cancel");
}
}
, OK: {
label: "OK",
className: "btn-primary",
callback: function () {
alert("OK");
}
}
}
}); bootbox.confirm({
buttons: {
confirm: {
label: '我是确认按钮',
className: 'btn-myStyle'
},
cancel: {
label: '我是取消按钮',
className: 'btn-default'
}
},
message: '提示信息',
callback: function(result) {
if(result) {
alert('点击确认按钮了');
} else {
alert('点击取消按钮了');
}
},
//title: "bootbox confirm也可以添加标题哦",
});*/
bootbox.alert({
buttons: {
ok: {
label: '我是ok按钮',
className: 'btn-myStyle'
}
},
message: '提示信息',
callback: function() {
alert('关闭了alert');
},
title: "bootbox alert也可以添加标题哦",
});
}); </script>
</body>
</html>
转自：http://blog.csdn.net/zh921112/article/details/41513161
【转】bootbox自定义dialog、confirm、alert样式，以及基本设置方法setDefaults中可用参数的更多相关文章
- Android创建自定义dialog方法详解-样式去掉阴影效果
在自定义组件时,从已有组件源码中会很大收获.就拿progressDialog来说 间接父类是dialog,想了解dialog继承结构可以去百度,或者 从构造器来说ProgressDial ...
- 自定义Dialog的详细步骤（实现自定义样式一般原理）
现在很多App的提示对话框都非常有个性,然而你还用系统的对话框样式,是不是觉得很落后呢,今天我就给大家讲讲怎样自定义自己的Dialog,学会了之后,你就会根据自家app的主题,设计出相应的Dialog ...
- Vue Element-ui自定义dialog样式
第一步:定义 自定义dialog class名 第二步:全局修改自定义样式 自定义dialogStyle有三个儿子,这样只用找到他们就可以自定更改啦 .custonStyle { xxxxx } .c ...
- 在Android的webview中定做js的alert,confirm和prompt对话框的方法
在Android的webview中定制js的alert,confirm和prompt对话框的方法 http://618119.com/archives/2010/12/20/199.html 1.首先 ...
- Android自定义Dialog
Android开发过程中,常常会遇到一些需求场景——在界面上弹出一个弹框,对用户进行提醒并让用户进行某些选择性的操作, 如退出登录时的弹窗,让用户选择“退出”还是“取消”等操作. Android系统提 ...
- android自定义弹出框样式实现
前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...
- 非自定义和自定义Dialog的介绍！！！
一.非自定义Dialog的几种形式介绍 转自:http://www.kwstu.com/ArticleView/kwstu_20139682354515 前言 对话框对于应用也是必不可少的一个组件,在 ...
- android 自定义Dialog去除黑色边框
在自定义Dialog时显示的界面中老是有黑色的边框,下面就介绍使用style去除黑色边框方法. 首先在values/styles定义自定义样式: <style name="MyDial ...
- Android自定义Dialog(美化界面)
前言:在做项目的时候,发现dialog界面太丑陋,从csdn上下载了一份自定义dialog的源码,在他的基础上对界面进行美化...有需要的朋友可以直接拿走 效果图如下: 主要代码: /** * 自定义 ...
随机推荐
- javascript移动设备触屏事件
ontouchstartontouchmoveontouchendontouchcancel 目前移动端浏览器均支持这4个触摸事件: /** * onTouchEvent */ var div = d ...
- [转载]C# 中对html 标签过滤
private string FilterHTML(string html) { System.Text.RegularExpressions.Regex regex1 = new System.Te ...
- Python PIL库之Image注解(API)
http://blog.csdn.net/xiezhiyong3621/article/details/8499543 class Image Methods defined here: __geta ...
- POJ2225+BFS
简单的BFS 1a /* 从起点到终点 */ #include<stdio.h> #include<string.h> #include<stdlib.h> # ...
- [Gauss]POJ1681 Painter's Problem
和POJ1222(分析)完全相同 题意也类似, 可以涂自己以及上下左右五个位置的颜色 问几次能全部涂色 不能输出inf 01方程组 用异或来求解就好了 ][]; // 增广矩阵 ]; // 解 ]; ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中
绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...
- 延时过程中要加上app.processEvents()，进度条里也要加上这句
如何让程序等待一段时间QTime t;t.start();while(t.elapsed()<1000);这种死循环也是一种常见错误用法.但改成正确的还是比较简单的: QTime t;t.sta ...
- Android 如何在ScrollView中嵌套ListView
前几天因为项目的需要,要在一个ListView中放入另一个ListView,也即在一个ListView的每个ListItem中放入另外一个ListView.但刚开始的时候,会发现放入的小ListVie ...
- 转载爱哥自定义View系列－－文字详解
FontMetrics FontMetrics意为字体测量,这么一说大家是不是瞬间感受到了这玩意的重要性?那这东西有什么用呢?我们通过源码追踪进去可以看到FontMetrics其实是Paint的一个内 ...
- 编译android后找不到ramdisk-u.img[已解决]
--- --- #!/bin/bash OUTDIR=out/target/product/tiny4412AHOSTBIN=out/host/linux-x86/bin # install vend ...