博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery 简单弹出层(转)
阅读量:6206 次
发布时间:2019-06-21

本文共 2494 字,大约阅读时间需要 8 分钟。

预定义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 = $("
"), // 只定义边框和关闭按钮,其余在参数中定义 $popup = $("
"+ "
×" + "
" + (html ? html : "") + "
" + "
"); 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 = '' + '
'; var popup1 = new Popup(pup1Html); popup1.show();})(jQuery);

 

转载于:https://www.cnblogs.com/xupeiyu/p/3804446.html

你可能感兴趣的文章
MVC3.0+DWZ探索
查看>>
小程序入口传参:关于带参数的小程序扫码进入的方法
查看>>
转载:ASP.NET在后台代码实现个功能,根据选择提示用户是否继续执行操作
查看>>
[Angularjs]锚点操作服务$anchorScroll
查看>>
静态代理设计与动态代理设计
查看>>
uva-10152-乌龟排序
查看>>
sqlmap手册
查看>>
将链表中m-n范围内的数进行倒序
查看>>
怎么发表博客,还不能显示在自己的博客首页上,这还不如玩单机!
查看>>
【翻译】Ext JS 4——Ajax和Rest代理处理服务器端一场和消息的方法
查看>>
OI基础系列之最大子数组问题
查看>>
Zookeeper概述、特点、数据模型
查看>>
Nginx_lua
查看>>
微信公众号自动回复加超链接最新可用实现方案
查看>>
error: stray '\343' in program 问题解决
查看>>
小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航
查看>>
为什么说任何基于比较的算法将 5 个元素排序都需要 7 次?
查看>>
redis 持久化
查看>>
几种去除数组中重复元素的方法、数组去重
查看>>
C语言递归实现二叉树(二叉链表)的三种遍历和销毁操作(实验)
查看>>