Objective:
The reason for writing this article I want to share my thoughts with you, for starters, I hope he can get something useful for him from this article, for experienced developers, I hope he can point out my shortcomings, give me more opinions and suggestions, the goal is to make progress together.
A. What plugins do you want to do?
I want to implement a plugin that replaces the browser's default pop-up dialog box or form, which is the web dialog box that pops up by calling Window.alert,window.confirm,window.prompt these methods. The form that pops up by calling Window.open,window.showmodaldialog,window.showmodelessdialog.
The reason for this is that the browser's default dialog box is simple enough to meet more needs, and the user experience is poor. A lot of modern browsers will default to prevent pop-up forms (probably because of pop-up ads in the past is too rampant reason it, remember 03, 40 that array, see a XX site to play a bunch of windows, shut not over, the browser has killed, even the computer is a machine. ）。
two. What is the desired effect?
As for the dialog box plugin, we all know that there are some differences in the display of styles in different browsers, but basically the layout structure is the same. The effect our plug-ins want is to have the same style and layout in any browser, in the middle of the browser (so the user can see it the first time).
A pop-up form is similar to a dialog box on implementation (I mean the plugin we're developing, not the default implementation of the browser).
three. Design the function
We look at the picture step-by-step:
1, blocking the content of the page (the picture on the gray translucent part), transparency can be set (opaque 0-1 completely transparent), the advantage is that the user can not close the dialog box before the operation of the page.
2, dialog Box Center Display, dialog box size can be set (long width).
3, the figure (1) and (2) for the dialog box icon, can be set.
4, dialog box title can be set content.
5, you can not show the Close button (x).
6, the bottom button can be 0 or more, and you can set the callback function.
Four. How to implement the function?
1. Use CSS styles to control appearance.
* To avoid CSS naming conflicts, we need to determine a namespace for the plug-in, under which all the styles are under that namespace.
2. Occlusion of all content
* We set the basic style in CSS.
Copy Code code as follows:
Position:absolute;
left:0;
top:0;
Background-color: #000;
z-index:99999;
* Here it is worth noting that the value of Z-index has a security scope, from Microsoft's instructions "The maximum value is 2147483647 for IE6, 7 and 8.But it is 16777271 for Safari 3, so a s AFE Cross Browser maximum value is 16777271. The effect is that the maximum value of ie6,7,8 support is 2147483647, but Safari 3 is 16777271, so be sure not to exceed 16777271.
* Use JS code to set its width and height, we pass $ (document). Width () Gets the page width, through $ (document). Height () Gets the page height.
3. dialog Box Center display
There are two ways to display a dialog box centered.
One is implemented through CSS.
Position:absolute If the page has a scroll bar, the dialog box will also move when the scroll bar scrolls.
Position:fixed, the more ideal, regardless of scrolling, dialog box always stay in the center of the page, the only disadvantage is not support IE6 (online has about if compatible IE6 method, interested friends can own to achieve).
The second is through the JS script control.
By calculating the length of the page to position, when changing the page size, the dialog box position will not change, the effect is not ideal. (Of course, it can be changed by listening to the page, automatically adjust the position, but to achieve more trouble, interested friends can try for themselves)
five. Browser compatible
Browser compatible What is the most annoying, but the most ideal effect of course is to be able to compatible with all browsers, in fact, if we spend more time and indeed can be compatible with all browsers. But is it worth it? If you ask the page designer what is the most annoying browser? I think most will answer is IE6, yes, this once swept the world, occupy the world more than 90% users of the Computer browser, we once thought it very good, well, maybe I should say good, or also can; Anyway, it was indeed the world's most popular browser. But now, it is the most unpopular browser in the eyes of our developers, in the global average use of not more than 5% of the case, in the celestial but still more than 20% of users in the use of it (from the http://www.ie6countdown.com/statistics), this is why? Same function if you want to be compatible with IE6 these old versions of browsers, we will probably spend one-third or more time, life is short, comrades, why not take the limited time to do more meaningful things? Kill IE6 from me!
Six. function implementation and invocation
CSS Section
Copy Code code as follows:
<style type= "Text/css" >
/* To avoid naming conflicts, we put all of the plug-in's styles 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 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. 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 title bar 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 toggle 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 Contents 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 button */{}
</style>
JS part
Copy Code code 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> '). 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> '). CSS (' background-image ', ' url (' + Opts.icon + ') '). Appendto (_bar_);
_titlewidth_-= 25;
}
if (opts.close) _titlewidth_-= 20;
$ (' <div class= ' title ' ></div> '). CSS ({width: _titlewidth_}). 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> '). CSS (' background-image ', ' url (' + opts.iconbig + ') '). Appendto (_container_) ;
_contentcss_.top =-48;
_contentcss_.marginleft = 48;
}
var _content_ = $ (' <div class= ' content ' ></div> '). 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 Default parameters
$.alert.defaults = {
Title: ' Informational Hints ',//dialog box titles
Content:null,//dialog box content
WIDTH:200,//Wide
HEIGHT:100,//High
opacity:0.5,//Transparency
Icon:null,//Small icon displayed in front of the title
Iconbig:null,//Display large icon to the left of content
Buttons:null,//button collection [{text: ' button display text ', fn: callback function (event)}],event = {}
close:true//whether to show the Close button
}
}) (JQuery);
Call
Copy Code code as follows:
$.alert ({
Title: ' Mars warns you ',//dialog box caption
Content: ' We are Martians, we are going to invade the Earth, are you ready? ',//dialog box content
WIDTH:300,//Wide
height:150,//High
opacity:0.5,//Transparency
Icon: ' Icon.png ',//small icon displayed in front of the title
Iconbig: ' Icon-big.png ',//Large icon displayed on the left side of the content
Buttons: [{text: ' Good fear ', fn:function () {$.alert (' I'm afraid ')}],//button collection [{text: ' button display text ', fn: callback function (event)}],event = {}
close:true//whether to show the Close button
});
seven. Download
Here is my test and use of examples, interested friends can download their own changes.
Click here to download
