jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除。
预定义css
/* 基本弹出层样式 */
.my-popup-overlay {
width:100%;
height:auto;
/* width height is defined by javascript */
position: absolute;
top:0;
left: 0;
z-index: 1000;
background-color: #000;
opacity: 0.2;
*filter:alpha(opacity=20);
}
.my-popup{
position: fixed;
top:200px;
left:50%;
/* margin-left:; defined by js */
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop + 200));
padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius: 5px;
background: gray;
z-index:1001;
}
.my-popup-close{
position: absolute;
top:10px;
right: 10px;
font-size: 16px;
width:20px;
height:20px;
text-align: center;
line-height: 20px;
background:#0aa;
color:#f00;
cursor: pointer;
}
.my-popup-close:hover{
text-decoration: none;
color:#fff;
font-weight: bold;
}
.my-popup-content{
background-color: #fff;
} /* 弹出层样式自定义部分 */
.popup-title{
padding:25px 0 10px;
font-size: 14px;
text-align: center;
}
.popup-inner{
width:300px;
padding:20px;
}
插件代码及应用示例
(function ($) { /*
* jquery 简单弹出层
* 主体内容作为参数传入
*/ var Popup = function (html) { // html 弹出层的主体 // 一个弹出层配一个遮罩
var $overlay = $("<div class='my-popup-overlay'></div>"), // 只定义边框和关闭按钮,其余在参数中定义
$popup = $("<div class='my-popup'>"+
"<a class='my-popup-close'>×</a>" +
"<div class='my-popup-content'>" +
(html ? html : "") +
"</div>" +
"</div>"); return {
show: function () {
// $overlay and $popup append to body
$("body").append($overlay).append($popup); var that = this; $overlay.css({
width: $(window).width(),
height: $(document).height()
}); $popup.css({
"margin-left": -($popup.width() / 2) + "px"
}); $(".my-popup-close").on("click", function () {
that.hide();
});
},
hide: function () { // 移除本次遮罩和弹出层
$overlay.remove();
$popup.remove();
}
}; }; // 应用示例
var pup1Html = '<h2 class="popup-title">标题</h2>' +
'<div class="popup-inner">so i say a little prayer</div>'; var popup1 = new Popup(pup1Html);
popup1.show();
})(jQuery);
jquery 简单弹出层(转)的更多相关文章
- jquery 简单弹出层
预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- jQuery.reveal弹出层
jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- 用jQuery解决弹出层的问题
在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...
- jQuery.reveal弹出层使用
最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...
- jQuery layer弹出层插件 http://layer.layui.com/直接上官网学
在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...
- jquery智能弹出层,自己主动推断位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Javascript学习总结三(Array对象的用法)
javascript Array对象的常用API 1:concat concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.举例:var a1 = [ ...
- Python基础:1.数据类型(元组)
提示:python版本为2.7,windows系统 1.元组(Tuple) Tuple,与List类似,但是Tuple一旦初始化之后就不能修改了,没有增加.删除.修改元素. >>> ...
- HashMap多线程死循环问题
HashMap通常会用一个指针数组(假设为table[])来做分散所有的key,当一个key被加入时,会通过Hash算法通过key算出这个数组的下标i,然后就把这个<key, value> ...
- javascript for in 循环时,会取到Array.prototype
/** *删除数组指定下标或指定对象 */ if(!Array.prototype.remove){ Array.prototype.remove = function(obj){ for(var i ...
- JavaScript入门(10)
一.Window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 window对象方法 二.JavaScript计时器 在JavaScript中,我们可以在设定的时间间隔之后来 ...
- MySQL常用查询
显示所有数据库 show datebases; 删除数据库 drop datebase dbName 创建数据库 create datebase [if not exists] dbName; //中 ...
- Google搜索技术
命令 双引号 把搜索词放在双引号中,代表完全匹配搜索,也就是说搜索结果返回的页面包含双引号中出现的所有的词,连顺序也必须完全匹配.bd和Google都支持这个指令. 减号 减号代表搜索不包含减号后面的 ...
- java面板
import java.awt.Color; import java.awt.Container; import javax.swing.JFrame; import javax.swing.JLab ...
- Error:(6, 0) No such property: outputDir for class: org.gradle.api.internal.project.DefaultProject_Decorated
在学习greenDao过程中build.gradle文件中出现这个错误,找了半天不知道为什么.代码我是在git上下载的Demo,按理说应该是没问题的.到最后发现缺少了一个关键字Def // 这样有问题 ...
- 对象创建型模式------Builder(生成器)
本文系转载,转载地址http://blog.sina.com.cn/s/blog_59b6af690100zj3l.html,只供自己学习使用. 假设现在有三种产品,是玩具,都是由三部分组成,头,身体 ...