Jquery has a very good ui plug-in, dialog plug-in, his official website has a variety of forms of Demonstration: http://jqueryui.com/demos/dialog/, it may be a lot of home or its default mode, I will not repeat the specific usage on the official website, but also the Chinese explanation address. I recently posted a framework page, taking a closer look, similar to the modal form mode of dialog plug-in, demo effect: http://www.lovewebgames.com/addNews.aspx
This is the effect. The login registration pop-up layer is required. Why don't I use modal form directly? Because I like it, you care about me. So I made a dialog plug-in under jquery, and I need to reference the original dialog file. The Code is as follows:
Copy codeThe Code is as follows: (function ($ ){
$. Fn. openWidow = function (options ){
Var divId = "dialog" + Math. round (Math. random () * 100 );
Var settings = {
Id: divId,
Width: 300,
Height: 200,
Modal: true,
Buttons :{
},
Show: "explode ",
Hide: "highlight ",
Title: "prompt ",
Url: "/test. aspx ",
Close: function (){
$ ("#" + This. id). remove ();
// Debugger
If (document. getElementById (this. id ))
Document. body. removeChild (document. getElementById (this. id ));
}
};
If (options ){
$. Extend (settings, options );
}
$ ("Body "). append ('<div id = "' + settings. id + '"title =" Dialog Title "> <p class =" loading "> </p> </div> ');
// Dialog
$ ('#' + Settings. id). dialog ({
AutoOpen: false,
Title: settings. title,
Width: settings. width,
Height: settings. height,
Modal: true,
Bgiframe: true,
Show: settings. show,
Hide: settings. hide,
Buttons: settings. buttons,
Close: settings. close,
Open: function (){
$ ("#" + Settings.id).html ('<iframe src = "' + settings. url + '"frameborder =" 0 "height =" 100% "width =" 100% "id =" dialogFrame "scrolling =" auto "> </iframe> ');
},
ResizeStop: function (){
$ ("# DialogFrame" ).css ("width", parseint((this).css ("width")-5 );
$ ("# DialogFrame" ).css ("height", parseint((this).css ("height")-5 );
}
});
$ ('#' + Settings. id). dialog ("open ");
Return this;
};
}) (JQuery );
I think everyone should still understand it. Nothing complicated is to repeat and repeat the work. Even many parameters are dialog. I just added a layer. I believe that this method is intended for many new users. After all, not everyone enjoys and is familiar with ajax. At this time, iframe is very useful.
I also hope that interested friends can join my Q groups: 70210212 and 5678537. I usually check them out and don't have to worry about any problems.
