Implementation Process of window in jquery custom plug-in development, jquerywindow

Implementation Process of window in jquery custom plug-in development, jquerywindow

In this example, the pop-up window effect is implemented: If you feel that the effect is good, continue reading.

1. jquery. show. js

/** Developer: lzugis * development time: July 15, June 10, 2014 * Implementation function: click the mouse to display the div * version number: 1.0 */(function ($) {$. fn. showDIV = function (options) {var defaults = {}; var options = $. extend (defaults, options); var showdiv = $ (this); var close, title, content; close = $ (""); title = $ (""); content = $ (""); showdiv.html (""); showdiv. append (close); showdiv. append (title); showdiv. append (content); close.html ("X"); title.html (options. title); content.html (options. content); showdiv.css ("display", "block"); showdiv.css ("position", "absolute"); showdiv.css ("left", ($ (window ). width ()-options. width)/2 + "px"); showdiv.css ("top", ($ (window ). height ()-options. height)/2 + "px"); showdiv.css ("width", options. width); showdiv.css ("height", options. height); close. bind ("click", function () {showdiv.css ("display", "none") ;};}) (jQuery );

22.16jquery.showdiv.css

body div{font-size:12px;text-align:center;}#container{background-color:#CCC;border:1px solid #000;width:1024px;height:600px;}#showdiv{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

<Script type = "text/javascript" src = "jquery/jquery. min. js "> </script> <script type =" text/javascript "src =" jquery/jquery. showdiv. js "> </script> <script type =" text/javascript "> $ (document ). ready (function () {$ ('# show '). bind ("click", function (evt) {var showdiv =$ ('# showdiv '). showDIV ({width: 400, height: 200, title: "I am not Huang Rong", content: "I'm not Huang Rong <br> I won't do martial arts <br> I only need Jing's brother <br> perfect love "});});}); </script> <input id = "show" name = "showDiv" value = "display" type = "button">

The above section describes the implementation process of the window for jquery custom plug-in development. I hope it will be helpful to you! We are also very grateful for your support for the help House website!