This article mainly introduces the implementation process of window in jquery custom plug-in development. For more information, see the example below, continue reading.
1. jquery. show. js
/** Developer: lzugis * development time: July 15, June 10, 2014 * Implementation function: click the mouse to display the p * version number: 1.0 */(function ($) {$. fn. showDIV = function (options) {var defaults = {}; var options = $. extend (defaults, options); var showp = $ (this); var close, title, content; close = $ (""); title = $ (""); content = $ (""); showp.html (""); showp. append (close); showp. append (title); showp. append (content); close.html ("X"); title.html (options. title); content.html (options. content); showp.css ("display", "block"); showp.css ("position", "absolute"); showp.css ("left", ($ (window ). width ()-options. width)/2 + "px"); showp.css ("top", ($ (window ). height ()-options. height)/2 + "px"); showp.css ("width", options. width); showp.css ("height", options. height); close. bind ("click", function () {showp.css ("display", "none") ;};}) (jQuery );
22.16jquery.showp.css
body p{font-size:12px;text-align:center;}#container{background-color:#CCC;border:1px solid #000;width:1024px;height:600px;}#showp{background-color:#FF0;width:100px;height:100px;display:none;z-index:99;}.title{padding:10px;background:#F39;font-weight:bold;text-align:center;color:#FFF;}.close{margin:5px;position:absolute;right:0px;top::0px;padding:5px;color:#000;background:#FFF;}.close:hover{cursor:pointer;background:#CCC;}.content{text-align:left;padding:10px;}
3366demo.html