jquery实现自定义弹出框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-typeahead.js" type="text/javascript"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet"/>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-select.js" type="text/javascript"></script>
<link href="../css/bootstrap-select.min.css" rel="stylesheet"/> <script type="text/javascript">
/*
用途描述：自定义的消息提示框和消息确认框，采用jquery的闭包方法实现，但必须依赖
与jQuery，否则没有效果。
使用说明：
alert框请调用：zdalert(title,top,width, message, function(ret))
confirm框请调用：zdconfirm(title,top,width, message, function(ret))
方法参数说明：
title：弹出框的显示标题；
top：弹出框位于当前窗体的高度，请填写整数值，使用的分数形式(_height - boxHeight) / top
width：弹出框的宽度，请填写px值。
message：弹出框显示的内容。
function：回调函数，需要执行的内容方法，参数ret有一个，为ture和false值*/ (function($) {
//声明闭包方法
$.alerts = {
alert: function(title,top,width, message, callback) {
if( title == null ) title = 'Alert';
$.alerts._show(title,top,width, message, null, 'alert', function() {
if( callback ) callback(result);
});
}, confirm: function(title, top,width,message, callback) {
if( title == null ) title = 'Confirm';
$.alerts._show(title, top,width,message, null, 'confirm', function(result) {
if( callback ) callback(result);
});
}, _show: function(title,top,width,msg, value, type, callback) { var _html = ""; _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';
_html += '<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); GenerateCss(top,width);
//判断是确认框还是提示框
switch( type ) {
case 'alert': $("#mb_btn_ok").click( function() {
$.alerts._hide();
callback(true);
});
$("#mb_btn_ok").focus().keypress( function(e) {
if( e.keyCode == 13 || e.keyCode == 27 ) $("#mb_btn_ok").trigger('click');
});
break;
case 'confirm': $("#mb_btn_ok").click( function() {
$.alerts._hide();
if( callback ) callback(true);
});
$("#mb_btn_no").click( function() {
$.alerts._hide();
if( callback ) callback(false);
});
$("#mb_btn_no").focus();
//键盘的按键快捷键
$("#mb_btn_ok, #mb_btn_no").keypress( function(e) {
//enter键
if( e.keyCode == 13 ) {$("#mb_btn_ok").trigger('click');}
//esc键
if( e.keyCode == 27 ){ $("#mb_btn_no").trigger('click');}
});
break; }
},
_hide: function() {
$("#mb_box,#mb_con").remove();
}
}
// 显示提示框,top,width:top窗体位置当前窗口的高低的百分比，必须填写整数；width窗体显示的宽度。
zdalert = function(title,top,width, message, callback) {
$.alerts.alert(title,top,width, message, callback);
}
//显示确认框,top,width:top窗体位置当前窗口的高低的百分比，必须填写整数；width窗体显示的宽度。
zdconfirm = function(title,top,width, message, callback) {
$.alerts.confirm(title,top,width, message, callback);
}; //生成Css
var GenerateCss = function (top,width) { $("#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: '350px', position: 'fixed',
backgroundColor: 'White', borderRadius: '15px'
});*/
//去掉边框的圆
$("#mb_con").css({ zIndex: '999999', width:width, position: 'fixed',
backgroundColor: 'White'
}); $("#mb_tit").css({ display: 'block', fontSize: '14px', color: 'white', padding: '10px 15px',
backgroundColor: '#31B0D5', borderRadius: '0 0 0 0',
borderBottom: '3px solid #999', fontWeight: 'bold'
}); $("#mb_msg").css({ padding: '20px', lineHeight: '20px',
borderBottom: '1px dashed #DDD', fontSize: '16px',backgroundColor:'#FCFCFC'
}); $("#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: '#168bbb', 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) / top + "px", left: (_widht - boxWidth) / 2 + "px" });
} })(jQuery);
</script> <body>
<input id="add" type="button" value="添加" />
<input id="update" type="button" value="修改" /> <script type="text/javascript"> $("#add").bind("click", function () {
// $.MsgBox.Alert("消息", "哈哈，添加成功！"); zdalert('系统提示',3,"350px",'请输入正确数值',function(){ //要回调的方法
window.location.href="http://www.baidu.com"}); }); //也可以传方法名 test
$("#update").bind("click", function () { // $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test); zdconfirm('系统确认框',6,"350px",'你确认提交该条数据吗',function(r){
if(r)
{
//...点确定之后执行的内容 window.location.href="http://www.baidu.com"
}
}); }); </script> </body>
</html>
jquery实现自定义弹出框的更多相关文章
- 弹出框一 之 基于bootstrap和jquery的自定义弹出框
(function ($) { window.Ewin = function () { var html = '<div id="[Id]" class="moda ...
- .NET MVC 学习笔记（四）— 基于Bootstarp自定义弹出框
.NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...
- js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
- android自定义弹出框样式实现
前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...
- react native仿微信性别选择-自定义弹出框
简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...
- bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
- jquery的Layer弹出框操作
在layer中,我们要先获取窗口的索引,然后再进行操作. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 $("# ...
- 自定义弹出框基于zepto 记得引入zepto
html <!DOCTYPE html> <html> <meta charset="utf-8"> <title></tit ...
- android 自定义弹出框AlertDialog ，很炫的哦
于是就小小的模仿了下自己写了这个这样的效果,主要代码如下:dlg = new AlertDialog.Builder(context).create();dlg.show();dlg.getWin ...
随机推荐
- 实际项目中，看 ECharts 和 HighCharts 渲染性能对比，表面看衣装，本质看内功！！！
最近做项目,使用的是echarts显示图表数据,但是数据量比较多的时候,有卡顿的情况.后来同事拿echarts和HighCharts做了对比,仅供大家参考.同时感谢同事做的工作. 一.查询1天的源数据 ...
- redhat 网络配置
1. 查看网络 ifconfig 网卡名字(eth0.wlan0) ifconfig -a //查看所有网卡配置 2. 网卡打开\关闭 ifconfig eth0 down ifconfig eth0 ...
- 关于工作与生活——HP大中华区总裁孙振耀撰文谈退休并畅谈人生
转自:http://blog.csdn.net/adaptiver/article/details/7494121 我有个有趣的观察,外企公司多的是25-35岁的白领, 40岁以上的员工很少,二三十岁 ...
- 【Mac系统 + Mysql】之安装Mysql数据库
安装Mysql步骤: 一.下载 参考文章<mac 安装MySQL> 到Mysql官网下载.dmg格式的文件 先放弃了,看下面的简易安装. 二.使用homebrew安装MySQL(推荐) 如 ...
- httpClient实现
1.实现功能 向关注了微信公众号的微信用户群发消息.(可以是所有的用户,也可以是提供了微信openid的微信用户集合) 2.基本步骤 前提: 已经有认证的公众号或者测试公众账号 发送消息步骤: 发送一 ...
- JVM调优- 学习笔记（转）
http://blog.csdn.net/fenglibing/article/details/6321453 GC学习笔记 这是我公司同事的GC学习笔记,写得蛮详细的,由浅入深,循序渐进,让人一看就 ...
- 【Atheros】pktgen的ipv6地址处理函数参考及ipv6基本知识
pktgen有很多函数可以作为很好的网络相关的工具函数,这里列出ipv6中1:0:0:0:0:0:0:1和1::1这两种地址形式相互转化的工具函数. 第一个函数,用于把一个1:0:0:0:0:0:0: ...
- HDU 5045 5047 5050 5053（上海网络赛E，F，I，L）
HDU 5045 5047 5050 5053 太菜了,名额差点没保住.吓尿..赶紧开刷树链抛分 5045:状压DP.压缩10个人.因为两个人不能差2以上,所以能够用01表示 5047:推推公式就可以 ...
- Windows下搭建React Native Android开发环境
准备工作 安装JDK 安装Android SDK 安装C++环境 安装node.js 安装react-native命令行工具 创建项目 运行packager 运行模拟器 安卓运行 安卓调试 安装JDK ...
- Mac Python建立简单的本地服务器
由于Mac自带Python 所以省去我们去下载了 打开终端 执行python stm-macmini:~ apple$ pythonPython 2.7.10 (default, Jul 14 20 ...