I have been trying to implement a modal box for a long time. I have found a lot of jquery plug-ins, but I am not satisfied with this one. But it is still in the development stage, I didn't even have a document API, so I had to figure it out for a long time.
Let's take a look at the code. I have customized the source code to achieve the desired effect:
Copy codeThe Code is as follows: <% @ page language = "java" contentType = "text/html; charset = UTF-8"
PageEncoding = "UTF-8" %>
<! DOCTYPE html PUBLIC "-// W3C // DTDHTML 4.01 Transitional //" http://www.w3.org/TR/html4/loose.dtd ">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> basic use of JQueryMagicDialog </title>
<Link href = "./css/default.css" type = "text/css" rel = "stylesheet">
<Link href = "./css/default(1).css" type = "text/css" rel = "stylesheet">
<Script type = "text/javascript" src = "./js/jquery. js"> </script>
<Script type = "text/javascript" src = "./js/cn. js"> </script>
<Script type = "text/javascript" src = "./js/magicDialog/core. js"> </script>
<Script type = "text/javascript" src = "./js/ui. js"> </script>
<Script type = "text/javascript" src = "./js/global. js"> </script>
<Script type = "text/javascript" src = "./js/magicDialog/dialog. js"> </script>
<Script type = "text/javascript" src = "./js/ga. js"> </script>
<Style type = "text/css">
# Btn {
Position: absolute;
Top: 50px;
Left: 250px;
}
</Style>
<Script type = "text/javascript">
$ (Function (){
$ ('. DlgDemoBtn'). click (function (){
Var el = $ (this), act = el. attr ('action ');
Switch (act ){
Case 'base ':
$ ('<Div> </div>'). mac ('Dialog ',{
Title: 'hup ',
Model: true,
AutoOpen: true,
Width: 200,
Draggable: true,
El: '<p> you clicked on me! </P>'
});
Break;
Case 'extended ':
Mac. opendlg ({
Title: 'hup ',
Message: 'Press {0} to close the window .',
Params: ['<B> ESC/Enter </B>'],
Buttons :[{
Text: 'confirmed ',
Click: function (d ){
D. close ();
}
}]
});
Break;
Case 'wait ':
Var h = mac. wait ('close this window in 3 seconds ');
Window. setTimeout (function (){
H. close ();
},3000 );
Break;
Case 'alert ':
Mac. alert ('Hello! ');
Break;
Case 'Confirm ':
Mac. confirm ('<p> are you sure? </P> ', function (){
Alert ('You clickedyes! ');
}, Null );
Break;
Case 'customize ':
Mac. confirm ('<p> are you sure? </P> ', null, null ,[{
Text: 'close ',
Click: function (d ){
D. close ();
}
},{
Text: 'confirmed ',
Click: function (d ){
D. close ();
}
}]);
Break;
}
});
});
</Script>
</Head>
<Body>
<Div id = "btn">
<Button class = "dlgDemoBtn" action = "basic"> Basic </button>
<Button class = "dlgDemoBtn" action = "extended"> Extended </button>
<Button class = "dlgDemoBtn" action = "wait"> Spinner </button>
<Button class = "dlgDemoBtn" action = "alert"> Alert </button>
<Button class = "dlgDemoBtn" action = "confirm"> Confirm </button>
<Button class = "dlgDemoBtn" action = "customize"> Customize </button>
</Div>
</Body>
</Html>
Shows the entire project architecture:
Among them, the css folder and the images folder place the necessary css files and images, while the js folder places the required js files. Don't look so much, there will be many functions to need these files in the future, the implementation of the modal prompt box is only a small function, that is, the files in the magicDialog folder.
Run the dialogDemo. jsp file. The page is as follows:
Paste a few results!
Click"Basic":
Click "Spinner ".":
Click Customize ":
In general, it is still a good plug-in. It is okay to test in IE9 and Chrome, but the pop-up box supports dragging in Chrome, but not in IE9.
For more information about the source files, see http://boarsoft.com/cn.
This is my learning result. You can repost it. Please feel free to contact us, but you must provide the link for this article.
