Learn how to develop jQuery plug-in development dialog box plug-in from the beginning of practice

Preface:
The reason why I wrote this article is to share my thoughts with you. For Beginners, I hope he can get useful things from this article. For experienced developers, I hope he can point out my shortcomings and give me more comments and suggestions. The purpose is to make progress together.

I. What plug-ins do I need?
I want to implement a plug-in that can replace the default pop-up dialog box or form of the browser, that is, we call window. alert, window. confirm, window. the web page dialog box popped up by the prompt method is called by window. open, window. showModalDialog, window. the form popped up by showModelessDialog.

This is because the default dialog box function of the browser is simple and cannot meet more needs. The user experience is poor. Many modern browsers will block pop-up forms by default (it may be because the previous pop-up advertisement was so rampant. Remember that in, a bunch of windows were displayed on XX websites, close all of them, the browser is dead, and even the computer is on the machine .).

2. What is the desired effect?
As for the dialog box plug-in, we all know that there are some different display styles in different browsers, but the layout structure is basically the same. The effect our plug-in wants is that the style and layout structure displayed in any browser are consistent and located in the center of the browser (so that users can see it immediately ).
The implementation of the pop-up form is similar to that of the dialog box (I mean the plug-in we want to develop, not the default Implementation of the browser ).

3. Design Features
Let's look at the image step by step:

1. Cover the page content (the gray translucent part on the image), and set the transparency (the transparency is transparent to 0-1). The advantage is that the page cannot be operated before the user closes the dialog box.
2. the dialog box is displayed in the center. The dialog box size can be set (length and width ).
3. In the figure (1) and (2), the dialog box Icons can be set.
4. You can set the title of the dialog box.
5. The close button (x) is not displayed ).
6. There can be 0 or more buttons at the bottom and a callback function can be set for them.

4. How to Implement functions?
1. Use the CSS style to control the appearance.
* To avoid CSS naming conflicts, we need to determine a namespace for the plug-in. All styles under it are under this namespace.
2. Block all content
* Set the basic style in CSS.
Copy codeThe Code is as follows:
Position: absolute;
Left: 0;
Top: 0;
Background-color: #000;
Z-index: 99999;

* Note that The value of z-index has a security range. Microsoft states that "The maximum value is 2147483647 for IE6, 7 and 8.But it is 16777271 for Safari 3, so a safe cross browser maximum value is 16777271. the maximum value supported by ie6, 7, and 8 is 2147483647, but Safari 3 is 16777271, so do not exceed 16777271 for the sake of insurance.

* Set the width and height using js code. We get the page width through $ (document). width () and get the page height through $ (document). height.
3. the dialog box is centered

There are two ways to center the dialog box.
First, it is implemented through CSS.
Position: absolute; if the page has a scroll bar, the dialog box will also move when the scroll bar is rolling.
Position: fixed; ideal. No matter how you scroll, the dialog box always stays in the center of the page. The only drawback is that IE6 is not supported (there are some methods on the Internet that are compatible with IE6, if you are interested, you can implement it on your own ).
Second, it is controlled through js scripts.
By calculating the page length and width, when the page size is changed, the location of the dialog box will not change and the effect will be unsatisfactory. (Of course, You can automatically adjust the location when the page is changed, but it is troublesome to implement. Interested friends can try it on their own)

5. browser compatibility

Browser compatibility is the most annoying, but the ideal effect is to be compatible with all browsers. In fact, if we spend more time, we can be compatible with all browsers. But is this worthwhile? What is the most annoying browser for page designers? I think most of them will answer the question "IE6". Yes, this browser that once swept the globe and occupied more than 90% computers in the world. We once thought it was good. Well, maybe I should say it was good, or, yes. In any case, it was indeed the world's most popular browser. But now, it is the most undesirable browser in our developers' eyes. When the global average usage is no more than 5%, in tianchao, more than 20% of users are using it (statistics from http://www.ie6countdown.com/). Why? If the same function is to be compatible with browsers of earlier versions of IE6, we will spend more than 1/3 or more time, and our life will be short. comrades, why not take the limited time for more meaningful tasks? Killing IE6 starts with me!

Vi. function implementation and calling

CSS Section
Copy codeThe Code is as follows:
<Style type = "text/css">

/* To avoid naming conflicts, place all styles of the plug-in under the class */
. Ctcx-dialog
{
Font-size: 14px;
}
. Ctcx-dialog. mark/* mask layer style */
{
Position: absolute;
Left: 0;
Top: 0;
Background-color: #000;
Z-index: 99999;
}
. Ctcx-dialog. dialog/* dialog box style */
{
Position: fixed;
Left: 50%;
Top: 50%;
Background-color: # FFF;
Z-index: 99999;
Border: 2px solid #000;
Padding: 2px;
}
. Ctcx-dialog. dialog. bar/* dialog box title bar */
{
Height: 30px;
Background-color: #999;
Color: # FFF;
}
. Ctcx-dialog. dialog. bar. icon/* dialog box title bar icon */
{
Width: 25px;
Height: 30px;
Background-repeat: no-repeat;
Background-position: center;
Display: inline-block;
}
. Ctcx-dialog. dialog. bar. title/* dialog box title */
{
Width: 340px;
Height: 30px;
Line-height: 30px;
Overflow: hidden;
Display: inline-block;
Vertical-align: top;
Font-weight: bold;
}
. Ctcx-dialog. dialog. bar. close/* dialog box title bar close button */
{
Width: 20px;
Height: 30px;
Background-image: url(close.png );
Background-repeat: no-repeat;
Background-position: center;
Display: inline-block;
Cursor: pointer;
}
. Ctcx-dialog. dialog. container/* dialog box content container */
{
Margin-top: 5px;
Overflow: auto;
}
. Ctcx-dialog. dialog. container. icon/* dialog box content container */
{
Background-image: url(icon-big.png );
Background-repeat: no-repeat;
Background-position: center;
Width: 48px;
Height: 48px;
}
. Ctcx-dialog. dialog. container. content/* dialog box content container */
{
Position: relative;
}
. Ctcx-dialog. dialog. buttons/* dialog box button bar */
{
Text-align: center;
Margin-top: 5px;
Height: 30px;
Position: relative;
Bottom: 0px;
}
. Ctcx-dialog. dialog. buttons a/* dialog box button */
{
Background-color: # DDD;
Color: #000;
Text-decoration: none;
Display: inline-block;
Padding: 5px;
}
. Ctcx-dialog. dialog. buttons a: hover/* dialog box button */
{
Background-color: #333;
Color: # FFF;
}
. Ctcx-dialog. dialog. buttons a: active/* dialog box button */{}
</Style>

JS Section
Copy codeThe Code is as follows:
(Function ($ ){
$. Alert = function (options ){

If (typeof options = 'string') options = {content: options };
Var opts = $. extend ({}, $. alert. defaults, options );

If (opts. content = null | opts. content. length = 0) return this;

Var me = $ ('<div> </div>'). addClass ('ctcx-dialog '). appendTo (document. body );
Var doc = $ (document );
$ ('<Div class = "mark"> </div> 'salary .css ({opacity: opts. opacity }). width (doc. width ()). height (doc. height ()). appendTo (me );
Var _ dialog _ = $ ('<div class = "dialog"> </div> '{.css ({
Width: opts. width,
Height: opts. height,
MarginLeft: 0-opts. width/2,
MarginTop: 0-opts. height/2
}). AppendTo (me );
Var _ bar _ = $ ('<div class = "bar"> </div>'). appendTo (_ dialog _);

Var _ titleWidth _ = opts. width-0;
If (opts. icon! = Null ){
$ ('<Div class = "icon"> </div> 'background .css ('background-image', 'url (' + opts. icon + ')'). appendTo (_ bar _);
_ TitleWidth _-= 25;
}
If (opts. close) _ titleWidth _-= 20;
$ ('<Div class = "title"> </div> '0000.css ({width: _ titleWidth _ 00000000.html (opts. title). appendTo (_ bar _);
If (opts. close ){
$ ('<Div class = "close"> </div>'). click (function (){
Me. remove ();
}). AppendTo (_ bar _);
}

Var _ containerHeight _ = opts. height-40;
Var _ container _ = $ ('<div class = "container"> </div>'). appendTo (_ dialog _);
Var _ contentCss _ = {};
If (opts. iconBig! = Null ){
$ ('<Div class = "icon"> </div> 'background .css ('background-image', 'url (' + opts. iconBig + ')'). appendTo (_ container _);
_ ContentCss _. top =-48;
_ ContentCss _. marginLeft = 48;
}
Var _ content _ = $ ('<div class = "content"> </div> 'faces .css(_contentcss_).html (opts. content). appendTo (_ container _);

If (opts. buttons! = Null & opts. buttons. length> 0 ){
_ ContainerHeight _-= 30;
Var _ buttons _ = $ ('<div class = "buttons"> </div>'). appendTo (_ dialog _);
$. Each (opts. buttons, function (I, _ button ){
$ ('<A href = "javascript:;">' + _ button. text + '</a>'). click (function (){
_ Button. fn (me );
}). AppendTo (_ buttons _);
})
}
_Container_.css ({height: _ containerHeight _});

This. close = function (){
Me. remove ();
}

This. setContent = function (content ){
_Content_.html (content );
}

Return this;
}
// Set the default parameters
$. Alert. defaults = {
Title: 'info', // the title of the dialog box
Content: null, // the content of the dialog box
Width: 200, // width
Height: 100, // high
Opacity: 0.5, // transparency
Icon: null, // small icon displayed before the title
IconBig: null, // large icon displayed on the left of the content
Buttons: null, // button set [{text: 'button display text', fn: callback function (event)}], event = {}
Close: true // whether to display the close button
}
}) (JQuery );

Call
Copy codeThe Code is as follows:
$. Alert ({
Title: 'Mars warns you ', // the title of the dialog box
Content: 'We are Martian, and we are about to intrude into the earth. Are you ready? ', // Dialog box content
Width: 300, // width
Height: 150, // high
Opacity: 0.5, // transparency
Icon: 'icon.png ', // small icon displayed before the title
IconBig: 'icon-big.png ', // large icon displayed on the left of the content
Buttons: [{text: 'Good fear ', fn: function () {$. alert ('My fears ')}], // button set [{text: 'button display text', fn: callback function (event)}], event = {}
Close: true // whether to display the close button
});

7. Download

The following is an example of my testing and use. If you are interested, you can download and modify it yourself.

Click here to download