Well, this is the first time to write in the form of a plug-in pop-up window, experience is still shallow, not written well.
/*-------------------------------*author:d.pan* date:2015/6/15*version:1.0* Description: Popup plugin-------------------------------*/;(function ($) {var defaultsetting = {title: ',//title Closetext: ' Off ',// Close button content: ' ',//Contents BOXID: ' Popdiv ',//Popup Idcloseid: ' closebtn ',//Close button idboxclassname: ' Popdiv ',//outer container style Titleclassnam E: ' Titlediv ',//header line style Closebtnclassname: ' closebtn ',//Close button style Contentclassname: ' content ',//Contents style}$.fn.extend ({' Popup ': function (obj) {New popup (Obj?jquery.extend (defaultsetting,obj):d efaultsetting); return this;}}); function PopUp (obj) {var $popUp = Creatediv (', Obj.boxclassname, Obj.boxid); var $title = Creatediv (Obj.title, OBJ.TITL Eclassname, "); $title. Append (Creatediv (Obj.closetext, Obj.closebtnclassname, Obj.closeid)); $popUp. Append ($title) ; $popUp. Append (Creatediv (obj.content, obj.contentclassname)); if ($ (' # ' +obj.boxid). Length <= 0) {$ (' body '). Append ($popUp); $ (' # ' + Obj.closeid). Click (function () {$ (' # ' +obj.boxid ). Remove ();});}} functionCreatediv (Con, cName, id) {return $ (' <div class= "' + (cname?cname: ') + '" id= ' + (id?id: ') + ' > ' +con+ ' </div> ') ;}}) (JQuery);
Demo page:
Css:/* pop-up window style */.popdiv{ position:fixed; left:0; right:0; Margin:auto; max-width:500px; width:80%; Background-color: #fff; border:1px solid #ccc; box-shadow:0 0 5px #ccc; font-size:14px; padding:5px;} /* Title Layer */.titlediv{ border-bottom:1px solid #ccc; padding:5px; height:25px;} /* Close button */.closebtn{ float:right; Cursor:pointer; margin-right:5px; Color: #000; Font-weight:bold;} /* Content layer */.content{ padding:5px; Text-indent:2em;}
Looks like this:
Firstblood-jquery pop-up window plug-in