预定义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 简单弹出层(转)的更多相关文章

  1. jquery 简单弹出层

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...

  2. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  3. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  4. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  5. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  6. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  7. jQuery.reveal弹出层使用

    最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...

  8. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

  9. jquery智能弹出层,自己主动推断位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. win7 cmd命令行窗口 宽度无法变大 自由调整大小

    偶然遇到了这个问题,百度查到了解决方案,执行一个bat批处理命令. mode con lines=40 mode con cols=160 color 250 cls @cmd

  2. 如何在Xilinx ISE中使用TCL提高工作效率

    http://wenku.baidu.com/link?url=jxtsPLGUlWwYuD8TtfWYYU_NhY5Qty3rx8ZDLCkINLe39JRGb90V5HoJhnkn9r_PQ6vZ ...

  3. 【itclx面向对象一】tcl基础语法:过程、作用域、以及itcl面向编程回顾

    学习熟悉编程的最好方法就是动手,有点面向编程思维的话,直接练习就可以.直接看demo 1.过程.作用域 #全局变量:过程外定义的变量#局部变量: 过程内部定义的变量 set a 100proc tes ...

  4. sql server 表变量、表类型、临时表

    sql server 中临时表分为会话临时表和永久临时表.会话临时表在会话结束后自动被删除,永久临时表与基本表的使用上基本无差异,需要显示调用drop将其删除. 创建临时表 创建会话临时表 creat ...

  5. 一点关于this的理解

    关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:k ...

  6. 【转】MyBatis学习总结(一)——MyBatis快速入门

    [转]MyBatis学习总结(一)——MyBatis快速入门 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC ...

  7. Activiti源码分析(框架、核心类。。。)

    http://jiangwenfeng762.iteye.com/blog/1338553 Activiti是业界很流行的java工作流引擎,关于Activiti与JBPM5的关系和如何选择不是本文要 ...

  8. (四)JAVA使用POI操作excel

    1,字体处理 Demo12.java package com.wishwzp.poi; import java.io.FileOutputStream; import org.apache.poi.h ...

  9. 【转载】C/C++之回调函数

    [转载地址]:http://www.cnblogs.com/chenyuming507950417/archive/2012/01/02/2310114.html 在理解“回调函数”之前,首先讨论下函 ...

  10. C#下如何用NPlot绘制期货股票K线图(1)?

    [简介] 作为一名专业程序化交易者,编程是一个程序员的基本功,本文是作者在做的一个期货CTP项目中有关K线绘图的一部分,偿试类MT4中图表 设计而写,在编写绘图时,查阅了相关资料,感觉还是用NPlot ...