Home > Developer > JavaScript
Function: zhou en ce recently wrote a jquery-based Information pop-up plug-in named showInfoDialog, which masks the background and then displays the information display box. The information display types include:
1. Description of information types:
1.1 successful operation information
1.2 error message
1.3 warning information
1.4. Notification Information
Ii. Instructions for use
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Insert title here </title>
<Link href = "style/showInfoDialog.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript" src = "js/jquery-1.6.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery-ui-1.9.1.custom.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery-showInfoDialog.js"> </script>
</Head>
<Body style = "background-color: # 4ed">
<Div id = "test" style = "width: 1000px; height: 800px; background-color: # fff">
</Div>
<Script type = "text/javascript">
Var options = {
'Dialogtype': 'info ',
'Theme ': 'info ',
'Message': 'Data loading is complete! ',
'Refresh': false
};
$ ("# Test"). showInfoDialog (options );
</Script>
</Body>
</Html>
In this example, the tag id is test is masked and information is displayed.
Simple settings:
In addition to necessary js and css files, you also need to set the dialogType and theme attributes. There are four ways for dialogType: success, error, warning, info; corresponding to four theme) settings: success, error, warning, info
Message is the data to be displayed;
Refresh indicates whether to reload the page after the pop-up box is closed.
Extension:You can add your own themes in the following format:
Copy codeThe Code is as follows:
. Info {border: 3px solid #2FADD7; background: # 92D6ED repeat-x top ;}
. Info span {color: # 0E7A9F ;}
. Info. closestatus a {background: #2FADD7 ;}
. Info. closestatus a: hover {background: #228DB0 ;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
