<!DOCTYPE html> <html lang="zh"> <style type="text/css"> .popup { position:fixed; z-index:2; top:60px; left:50%; width:460px; height:270px; background:#fff; -moz-box-shadow:4px 4px 30px #130507; -webkit-box-shadow:4px 4px 30px #130507; box-shadow:4px 4px 30px #130507; -moz-transition:top 800ms; -o-transition:top 800ms; -webkit-transition:top 800ms; transition:top 800ms; } .p_close { float:right; width:15px; height:14px; margin:11px 10px 0 0; /* background:url(../img/popup_close.png); */ } .p_body { background:#000; left:0; top:0; position:fixed; width:100%; height:100%; opacity:0.7; -moz-transition:opacity 800ms; -o-transition:opacity 800ms; -webkit-transition:opacity 800ms; transition:opacity 800ms; } .js__slide_top { height:0; overflow:hidden; top:0; } .js__fadeout { height:0; overflow:hidden; opacity:0; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> (function ($) { $.fn.simplePopup = function () { var simplePopup = { initialize: function (self) { var popup = $(".js__popup"); var body = $(".js__p_body"); var close = $(".js__p_close"); var hash = "#popup"; var string = self[0].className; var name = string.replace("js__p_", ""); if (!(name === "start")) { name = name.replace("_start", "_popup"); popup = $(".js__" + name); name = name.replace("_", "-"); hash = "#" + name; }; self.on("click", function () { simplePopup.show(popup, body, hash); return false; }); $(window).on("load", function () { simplePopup.hash(popup, body, hash); }); body.on("click", function () { simplePopup.hide(popup, body); }); close.on("click", function () { simplePopup.hide(popup, body); return false; }); $(window).keyup(function (e) { if (e.keyCode === 27) { simplePopup.hide(popup, body); } }); }, centering: function (self) { var marginLeft = -self.width() / 2; return self.css("margin-left", marginLeft); }, show: function (popup, body, hash) { simplePopup.centering(popup); body.removeClass("js__fadeout"); popup.removeClass("js__slide_top"); window.location.hash = hash; }, hide: function (popup, body) { popup.addClass("js__slide_top"); body.addClass("js__fadeout"); window.location.hash = "#"; }, hash: function (popup, body, hash) { if (window.location.hash === hash) { simplePopup.show(popup, body, hash); } } }; return this.each(function () { var self = $(this); simplePopup.initialize(self); }); }; })(jQuery); // 初始化 $(function () { $(".js__p_start, .js__p_another_start").simplePopup(); }); </script> <head> <meta charset="utf-8"> <title>自定义弹窗</title> </head> <body> <h2 style="text-align:center;">自定义弹窗</h2> <h3 style="text-align:center;"><a href="#" class="js__p_start">点击弹窗</a></h3> <div class="p_body js__p_body js__fadeout"></div> <div class="popup js__popup js__slide_top"> <h1>哈哈哈，内容主体</h1> <a href="#" class="p_close js__p_close" title="Close">关</a> </div> </body> </html>
参考：http://www.freejs.net/article_jquerywenzi_359.html
^_^