web前段 弹出小例子
<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>
1.
$(document).on("click", "#test", function(e) {
bootbox.confirm("Hello world!", function(result) {
if (result) {
alert('点击了确认按钮');
} else {
alert('点击了取消按钮');
}
});
});
2.
$(document).on("click", "#test", function(e) {
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");
}
}
}
});
});
效果图：
3.
$(document).on("click", "#test", function(e) {
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也可以添加标题哦",
});
});
效果图：
4.
$(document).on("click", "#test", function (e)
{
bootbox.alert({
buttons: {
ok: {
label: '我是ok按钮',
className: 'btn-myStyle'
}
},
message: '提示信息',
callback: function () {
alert('关闭了alert');
},
title: "bootbox alert也可以添加标题哦",
});
});
效果图：
web前段 弹出小例子的更多相关文章
- JS设置弹出小窗口。
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...
- web页面弹出窗口代码大全
//-----------按钮提示框----------// <input type="button" name="btn2" id="btn2 ...
- [js开源组件开发]js手机端浮层控件，并有多种弹出小提示，兼容pc端浏览器
js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js di ...
- vue.js 利用组件之间通讯，写一个弹出框例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- layui 在页面弹出小窗口，并关闭
function showdialog() { layer.open({ type: 2, title: '发起调度', shadeClose: true, shade: 0.8, area: [ ...
- JS 弹出小窗口
弹出窗口函数 function openwindow(url,name,iWidth,iHeight){ var url; //转向网页的地址; var name; //网页名称,可为空; var i ...
- web项目引入extjs小例子
一个新的项目,前端用extjs实现!分享一下extjs开发的准备工作! 首先去下载extjs的资源包,这里我是随便在网上下载的! 打开之后 ,目录是这样的! 需要关注的几个文件夹: builds:压缩 ...
- web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动
场景概述 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...
- Web之-----弹出确认框控件应用
引用文件!-------- <link rel="stylesheet" type="text/css" href="@Url.FrontUrl ...
随机推荐
- MyBatis简单实例
---直接贴代码 (1)User.Java package me.gacl.domain; /** * @author gacl * users表所对应的实体类 */ public class Use ...
- BizTalk 2013 Beta 新特性介绍
BizTalk2013 Beta于2012年11月6日发布,下面来介绍一下BizTalk 2013 Beta的新特性. [核心更新功能] 1. 与云服务集成 BizTalk 2013 Server提供 ...
- IOS第八天(3:UITableViewController团购, 点击底部代码调整)
****代理者的方法中 // 通知页脚视图调整视图显示状态 [footerView endRefresh]; //发送代理通知的类中 /** 视图控制器刷新完成调用方法 */ - (void)endR ...
- 10.5.2 Boot Block 启动块 - 操作系统教程
简单一篇文章明白地讲解了计算机操作系统的启动过程 OPERATING SYSTEM CONCEPTS ABRAHAM SILBERSCHATZ PETER BAER GALVIN GREG GAGNE ...
- 如何使用Jquery自定义命名空间namespace
// 把生成命名空间的方法绑定在jQuery上 jQuery.namespace = function () { var a = arguments, o = null, i, j, d; for ( ...
- 20145209&20145309信息安全系统设计基础实验报告 （4）
实验步骤 阅读和理解源代码 demo_read,demo_write 函数完成驱动的读写接口功能,do_write 函数实现将用户写入的数据逆序排列,通过读取函数读取转换后的数据.这里只是演示接口的实 ...
- larave5.1l队列
官方文档http://laravel.com/docs/5.1/queues#dealing-with-failed-jobs 1.队列容器设置为数据库 config/queue.php 'defau ...
- rabbimq之流控
rabbitmq为了能够保证服务器在大量使用资源的情况下正常工作,会做流控. 所谓流控有以下两个方面.一是针对连接做流控,即降低某频率过快的发送消息.二是整体流控,即将所有消费者发送的消息丢掉,悄无声 ...
- HTML中div以及span等元素获取焦点
在js操作html的时候如果想让某个元素获取焦点,一般去掉用其.focus()方法. 但如果为非表单元素的div span等,必须要添加属性tabIndex=1这个属性后调用.focus()方法即可! ...
- LeetCode 3Sum Smaller
原题链接在这里:https://leetcode.com/problems/3sum-smaller/ 题目: Given an array of n integers nums and a targ ...