首页 > 代码库 > jquery 简单弹出层(转)
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);
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。