js+jquery手写弹出提示框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery弹出框-jq22.com</title>
<script src="jquery-1.11.3.js"></script>
<style>
</style>
</head>
<body>
<input id="add" type="button" value="添加">
<!-- <input id="delete" type="button" value="删除" /> -->
<input id="update" type="button" value="修改"> <script>
$("#add").bind("click", function() {
$.MsgBox.Alert("消息", "哈哈，添加成功！");
}); //回调函数可以直接写方法function(){}
/*$("#delete").bind("click", function () {
$.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复，确定继续吗？温馨提示", function () { alert("你居然真的删除了..."); });
});*/
function test() {
alert("你点击了确定,重新进行认证");
}
//也可以传方法名 test
$("#update").bind("click", function() {
$.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test);
});
//当然你也可以不给回调函数,点击确定后什么也不做，只是关闭弹出层
//$("#update").bind("click", function () { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？"); }); (function() {
$.MsgBox = {
Alert: function(title, msg) {
GenerateHtml("alert", title, msg);
btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback
btnNo();
},
Confirm: function(title, msg, callback) {
GenerateHtml("confirm", title, msg);
btnOk(callback);
btnNo();
}
}
//生成Html
var GenerateHtml = function(type, title, msg) {
var _html = "";
_html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';
_html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';
if (type == "alert") {
_html += '<input id="mb_btn_ok" type="button" value="确定" />';
}
if (type == "confirm") {
_html += '<input id="mb_btn_ok" type="button" value="确定" />';
_html += '<input id="mb_btn_no" type="button" value="取消" />';
}
_html += '</div></div>';
//必须先将_html添加到body，再设置Css样式
$("body").append(_html);
//生成Css
GenerateCss();
} //生成Css
var GenerateCss = function() {
$("#mb_box").css({
width: '100%',
height: '100%',
zIndex: '99999',
position: 'fixed',
filter: 'Alpha(opacity=60)',
backgroundColor: 'black',
top: '0',
left: '0',
opacity: '0.6'
});
$("#mb_con").css({
zIndex: '999999',
width: '400px',
position: 'fixed',
backgroundColor: 'White',
borderRadius: '15px'
});
$("#mb_tit").css({
display: 'block',
fontSize: '14px',
color: '#444',
padding: '10px 15px',
backgroundColor: '#DDD',
borderRadius: '15px 15px 0 0',
borderBottom: '3px solid #009BFE',
fontWeight: 'bold'
});
$("#mb_msg").css({
padding: '20px',
lineHeight: '20px',
borderBottom: '1px dashed #DDD',
fontSize: '13px'
});
$("#mb_ico").css({
display: 'block',
position: 'absolute',
right: '10px',
top: '9px',
border: '1px solid Gray',
width: '18px',
height: '18px',
textAlign: 'center',
lineHeight: '16px',
cursor: 'pointer',
borderRadius: '12px',
fontFamily: '微软雅黑'
});
$("#mb_btnbox").css({
margin: '15px 0 10px 0',
textAlign: 'center'
});
$("#mb_btn_ok,#mb_btn_no").css({
width: '85px',
height: '30px',
color: 'white',
border: 'none'
});
$("#mb_btn_ok").css({
backgroundColor: '#168bbb'
});
$("#mb_btn_no").css({
backgroundColor: 'gray',
marginLeft: '20px'
});
//右上角关闭按钮hover样式
$("#mb_ico").hover(function() {
$(this).css({
backgroundColor: 'Red',
color: 'White'
});
}, function() {
$(this).css({
backgroundColor: '#DDD',
color: 'black'
});
});
var _widht = document.documentElement.clientWidth; //屏幕宽
var _height = document.documentElement.clientHeight; //屏幕高
var boxWidth = $("#mb_con").width();
var boxHeight = $("#mb_con").height();
//让提示框居中
$("#mb_con").css({
top: (_height - boxHeight) / 2 + "px",
left: (_widht - boxWidth) / 2 + "px"
});
}
//确定按钮事件
var btnOk = function(callback) {
$("#mb_btn_ok").click(function() {
$("#mb_box,#mb_con").remove();
if (typeof(callback) == 'function') {
callback();
}
});
}
//取消按钮事件
var btnNo = function() {
$("#mb_btn_no,#mb_ico").click(function() {
$("#mb_box,#mb_con").remove();
});
}
})();
</script> </body>
</html>
js+jquery手写弹出提示框的更多相关文章
- jquery删除记录弹出提示框
来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...
- 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- jQuery - 选中复选框则弹出提示框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ，弹出提示框
1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...
- PHP弹出提示框并跳转到新页面即重定向到新页面
本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下 这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- 关于winform窗体关闭时弹出提示框，选择否时窗体也关闭的问题
在窗体中有FormClosing这个事件,这个事件是在窗体关闭时候运行的.如果要取消某个事件的操作,那么就在该事件中写上e.Cancel=true就能取消该事件,也就是不执行该事件.所以,你要在窗体关 ...
随机推荐
- PDF阅读器中如何改变线条颜色、线宽和线型等
1.打开PDF阅读器过后,点击菜单栏"注释"这一栏,找到绘图区域中的线条或铅笔: 2.分别用线条和铅笔随意画两条直线,然后选中直线,右键点击直线并打开"属性": ...
- 彻底删除mysql服务（清理注册表）
前言 由于安装某个项目的执行文件,提示要卸载MySQL以便它自身MySQL安装,然后我禁用了MYSQL服务,再把这个文件夹删除后,发现还是提示请卸载MYSQL服务. ----------------- ...
- log4net 全局配置
public class LogHelper { private static readonly log4net.ILog ILogInfo = log4net.LogManager.GetLogge ...
- Tp5自动验证
<?php class DB { private $address = 'mysql.21future.com'; private $username = 'manbang'; private ...
- android端 socket长连接 架构
看过包建强的<App研发录>之后对其中的基础Activity类封装感到惊讶,一直想找一种方式去解决关于app中使用socket长连接问题,如何实现简易的封装来达到主活动中涉及socket相 ...
- 自然语言处理之LCS最长公共子子序列
#!一个序列S任意删除若干个字符得到的新序列T,则T叫做S的子序列 注意,这个和最长公共字串不一样,最长公共子串要求连续. 1.算法公式: def lcs(a,b): lena = len(a) le ...
- ADO.NET连接字符串大全---各种数据库的连接字符串
ADO.NET连接字符串大全 ADO.NET连接字符串 名称 ADO.NET连接字符串 说明 ADO.NET连接字符串:SQL Server,SQL Server 2005,ACCESS,Oracle ...
- RHCE认证考前辅导
一一:Linux认证题库详细说明 注意事项 (1) RHCSA上午2.5小时,RHCE下午3.5小时,考生需对题目非常熟练. (2) 5样东西必带(身份证.1支黑色水笔.常用邮箱.姓名拼音.聪明的脑袋 ...
- Confluence 6 禁用或者重新启用一个任务
在默认的情况下,所有的 Confluence 计划任务都是默认启用的. 使用 启用(Disable )/ 禁用(Enable )连接操作来启用和禁用每一个计划任务. 不是所有的加护任务都可以被禁用的. ...
- node.js 的热更新
1.安装 npm i supervisor -gd 2.运行 supervisor server.js //server.js 是你自己的服务的js文件