Dialog Box plug-in -- dialog

Source: Internet
Author: User

Based on jquery and dot. js pop-up box plug-ins, compatible with other browsers such as IE6 +.

Thought: the pop-up box element is inserted into the body node and displayed vertically in the center of the page (fixed positioning) to trigger confirmation and Close event binding.

Note that ie6 contains two problems:
1. select and flash cannot be masked. iframe is used.
2. The fixed attribute recalculates the height when rolling or uses expressions in the style to calculate the expression.

Source code analysis:
1. creatHtml: Use the doT. js initialization element to add it to the body;
2. show: Set the width, height, and center display;
3. events: to close and confirm binding events;
4. removeCallback: removes an element node. If yes, the callback method is executed;
5. ie6fixed: handle the fixed compatibility in ie6.

Parameter instructions:

Width: defines the width of the pop-up box. The default value is 400.
Height: defines the height of the pop-up box. The default value is 100.
Title: defines the title of the pop-up box. The default value is null.
Html: defines the content in the pop-up box. The default value is null.
Type: defines the type of the pop-up box. The default value is default. Other conforms and alert.
Closed: the close button in the title bar. The callback method. The default value is null.
Conform: contains the name of the button. The default value is OK. The callback method is used. The default value is null.
Cancel: contains the name of the button. The default value is "cancel" and "callback". The default value is "null.
Note: If you use conform or alert, it does not work if you do not set the type.


Put it at the bottom of the page as a public part:



Usage:

180 "pop-up box" ", default pop-up box oh" "Close"



Github address:

DEMO:



Run code

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.