1、插件代码easy-box.js
$.extend({
alert:function(title,msg,width){
var box_html = getPopBoxHtml('alert',title,msg,'');
showBoxDiv(box_html,width);
},
confirm:function(title,msg,callback,width){
var box_html = getPopBoxHtml('confirm',title,msg,callback);
showBoxDiv(box_html,width);
$('#box_ok_btn').click(function(){
if ($.isFunction(callback)) {
hideDiv('pop-div');
callback(true);
}
});
},
prompt:function(title,label,callback,width){
var box_html = getPopBoxHtml('prompt',title,label,callback);
showBoxDiv(box_html,width);
$('#box_ok_btn').click(function(){
if ($.isFunction(callback)) {
var data = $('#easy_box_input').val();
hideDiv('pop-div');
callback(data);
}
});
},
easyBox:function(title,content,width){
var box_html = getPopBoxHtml('box',title,content,'');
showBoxDiv(box_html,width);
}
});
function showBoxDiv(box_html,width){
$('body').append(box_html);
var div_obj = $("#pop-div");
$("#pop-div").css('width',parseInt(width));
var popupHeight = div_obj.height();
var popupWidth = div_obj.width();
var popupWidth = div_obj.width();
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
//添加并显示遮罩层
$("<div id='mask'></div>").addClass("mask").width(windowWidth + document.body.scrollWidth).height(windowHeight + document.body.scrollHeight).appendTo("body").fadeIn(200);
//动画
div_obj.css({"position": "absolute"}).animate({left: windowWidth/2-popupWidth/2,top: windowHeight/2-popupHeight/2, opacity: "show" }, "slow");
//普通显示
// div_obj.css({"position": "absolute",'top':windowHeight/2-popupHeight/2,'left':windowWidth/2-popupWidth/2,'display':'block'});
}
function getPopBoxHtml(type,titile,msg,callback){
var html = '<div id="pop-div" class="pop-box">';
html += '<div class="pop-box-title">';
html += titile+' <a href="javascript:hideDiv(\'pop-div\');" class="pop-box-close">x</a>';
html += '</div>';
html += '<div class="pop-box-body" >';
if(type=='alert'){
html += '<p>'+msg+'</p>';
html += '</div>';
html += '<div class="pop-box-bottom">';
html += '<input id=btnClose type=button onclick="hideDiv(\'pop-div\');" value="确定"/>';
html += '</div>';
}else if(type=='confirm'){
html += '<p>'+msg+'</p>';
html += '</div>';
html += '<div class="pop-box-bottom">';
html += '<input id=btnClose type=button onclick="hideDiv(\'pop-div\');" value="取消"/><input id="box_ok_btn" type=button value="确定"/>';
html += '</div>';
}else if(type=='prompt'){
html += '<p>'+msg+'<input id="easy_box_input" type="text"></p>';
html += '</div>';
html += '<div class="pop-box-bottom">';
html += '<input id=btnClose type=button onclick="hideDiv(\'pop-div\');" value="取消"/><input id="box_ok_btn" type=button value="确定"/>';
html += '</div>';
}else{
html += msg;
html += '</div>';
}
html += '</div>';
return html;
}
//窗口变化时间
$(window).resize(function() {
var div_obj = $("#pop-div");
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var popupHeight = div_obj.height();
var popupWidth = div_obj.width();
div_obj.css({"top": windowHeight/2-popupHeight/2,'left':windowWidth/2-popupWidth/2});
});
//隐藏弹出框
function hideDiv(div_id) {
$("#mask").remove();
$("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");
$("#" + div_id).remove();
}
2、html引用页代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>弹框demo测试</title>
<script type='text/javascript' src='/test/jquery.min.js'></script>
<script type='text/javascript' src='/test/easybox.js'></script>
<style type="text/css">
.pop-box {
z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
margin-bottom: 3px;
display: none;
position: absolute;
background: #FFF;
border:solid 1px gray;
width:300px;
}
.pop-box h4 {
color: black;
cursor:default;
height: 18px;
font-size: 14px;
font-weight:bold;
text-align: left;
padding-left: 8px;
padding-top: 4px;
padding-bottom: 2px;
background: url("../images/header_bg.gif") repeat-x 0 0;
}
.pop-box-body {
clear: both;
margin: 4px;
padding: 2px;
}
.mask {
color:#C7EDCC;
background-color:#C7EDCC;
position:absolute;
top:0px;
left:0px;
filter: Alpha(Opacity=60);
}
.pop-box-title{
height:30px;
background:#109341;
line-height:30px;
padding-left:6px;
color:white;
position:relative;
}
.pop-box-bottom{
height:30px;
}
.pop-box-bottom input{
float:right;
margin-right:10px;
}
.pop-box-close{
position:absolute;display:block;height:12px;width:12px;color:white;right:6px;top:-3px;text-decoration:none;
}
</style>
<script language=javascript type="text/javascript">
function confirm(id){
$.confirm('确认框','是确认删除',function(){
alert('你确定删除'+id);
},500);
}
function prompt(id){
var bb= $.prompt('修改密码','请输入密码',function(data){
alert(data);
},500);
}
function showDiv(id){
$html = "<div style=\"width:550px;height:600px;\"><input type=button id=btnTest1 value='confirm' onclick=\"confirm(1)\"/></div>";
$.easyBox('aa',$html,'400');
}
</script>
</head>
<body style="height:12000px;">
<input type=button id=btnTest value='alert' onclick="$.alert('弹窗测试','你填写的用户名是stelin',500);"/>
<input type=button id=btnTest1 value='confirm' onclick="confirm(1)"/>
<input type=button id=btnTest1 value='prompt' onclick="prompt(1)"/>
<a href="javascript:showDiv(1);">弹出层</a>
<br>
</body>
</html>
相关推荐
本文将深入探讨基于jQuery的弹框插件，这种插件能够为网页增添交互性和用户体验。 首先，我们要了解什么是弹框。在网页设计中，弹框通常是指一种在用户与页面交互时突然出现的窗口，可以用来显示通知、询问用户或...
jquery插件jquery-ui-timepicker-addon.j
《jQuery弹框插件——artDialog的深度解析与应用》 在Web开发中，弹框是一种常见的用户交互元素，用于提示信息、确认操作或者展示详细内容。jQuery作为一款广泛使用的JavaScript库，提供了丰富的插件来简化这方面的...
jQuery打印插件----jQuery.print.js实现网页的打印功能，亲测有效
- `jQuery-easyui-docs.chm`：这是jQuery Easy-UI的官方文档，包含详细的组件说明、使用示例和API参考，是学习和使用Easy-UI的重要资源。 - `jQuery_jQueryUI.chm`：这是jQuery UI的官方文档，提供了关于jQuery UI...
在这个项目中，我们有一个名为“自定义jquery-wizard插件”的实现，通过提供的资源文件，我们可以看到一个完整的实现案例。 1. **主要文件解析：** - **jquery-wizard.1.0.css**：这是样式表文件，包含了插件的...
《jQuery弹框插件详解与应用实践》 在Web开发中，弹框是常见的交互元素，用于提示信息、用户确认或展示复杂内容。jQuery作为一款轻量级的JavaScript库，以其简洁的API和丰富的功能深受开发者喜爱。今天，我们将深入...
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
在本篇文章中，我们将深入探讨其自定义版本 `jquery-ui-1.8.18.custom.min.js` 和相关的 CSS 文件，以理解它们如何协同工作，为网页带来强大的功能和美观的界面。 首先，`jquery-ui-1.8.18.custom.min.js` 是 ...
例如，`jQuery-dialogBox20151123`很可能是一个jQuery弹框插件，包含了弹框的HTML模板、CSS样式和JavaScript逻辑。你可以通过解压这个文件，查看其结构和代码，学习如何构建弹框。 实现jQuery弹框的步骤通常包括： ...
《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域，jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展，提供了丰富的用户界面组件...
**jQuery摄像头插件jquery-webcam-plugin** 在网页开发中，集成摄像头功能可以帮助用户实时捕捉图像，广泛应用于在线证件照上传、视频聊天、虚拟试衣间等场景。`jQuery webcam plugin`是一个优秀的JavaScript库，它...
常见的弹框插件有jQuery UI的Dialog、Bootstrap的Modal等，但在这个场景中，我们关注的是通过jQuery实现自定义的弹框功能，用于播放视频。 1. **创建弹框结构** 要创建一个弹框，我们需要在HTML中定义一个隐藏的...
《深入解析jQuery.editable-select-master下拉菜单插件》 在网页开发中，下拉菜单是一种常见的交互元素，用于提供用户选择操作或展示大量数据。jQuery.editable-select-master是一款基于jQuery的可编辑下拉菜单插件...
- **jquery-1.4.4.min.js**：Easy-UI依赖于jQuery库，这个文件是jQuery的1.4.4版本的压缩版，用于处理DOM操作和事件处理。 - **easyloader.js**：Easy-UI的加载器，可以自动加载所需的组件，简化开发流程。 - **...
"jquery-stack-image-player.rar"是一个基于jQuery的图像轮播插件，它提供了多图自动轮播的功能，模拟酷狗音乐的图片展示效果，为网页增添了一份动态美。本文将深入探讨这一插件的工作原理、实现方式以及如何进行...
在网页设计中，为了提供更好的用户体验，我们常常...而在实际开发中，可以参考已有的优秀弹框插件，如jQuery UI的Dialog、Bootstrap的Modal等，它们都提供了丰富的功能和良好的文档支持，可以快速实现美观的弹框效果。
`jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例，它提供了丰富的交互式对话框功能，包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开（open）模式。这个插件使得在...
在jQuery中，弹框可以通过多种方式实现，如自定义函数、使用插件或是直接调用内置的`alert()`、`confirm()`和`prompt()`函数。然而，自定义弹框更能符合设计师的需求，它们可以更灵活地定制样式、内容和行为。 创建...