Similar to Thinkbox,lightbox and so on. Used to display a page, picture, or other content in a chic modal dialog box. This is its official website: http://orangoo.com/labs/GreyBox/
Let's take a look at some of its examples:
(1) Open the Web page:
(2) display a group of pictures:
Basic use
(1) To enter the official website, click to download
(2) decompression. (One of the installation.html the use of its description, very simple, a look at the understanding.) I'll just write the steps.
(3) Copy the Greybox folder to the Web project root directory, note : must be placed in the Web root directory, placed in the other directory or level two will not be able to use, in my project is so deployed:
(By the way, I put it in the JS folder in the beginning, because my JS script is in the inside, JQuery is also in, but can not use ...) Finally put it in the root directory can be used. ）
(4) We can use it now, we use a test page to test, the code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>test.html</title>
<!--Greybox Reference started-->
<script type= "Text/javascript" >
var gb_root_dir = "./greybox/"; Notice the path here!!!
</script>
<script type= "Text/javascript" src= "Greybox/ajs.js" ></script>
<script type= "Text/javascript" src= "Greybox/ajs_fx.js" ></script>
<script type= "Text/javascript" src= "Greybox/gb_scripts.js" ></script>
<link href= "Greybox/gb_styles.css" rel= "stylesheet" type= "Text/css"/>
<!--greybox Reference end-->
<body>
<a href= "http://www.baidu.com" title= "Baidu" rel= "gb_page[500," "> Baidu </a>
</body>
This completes the basic use.
However, in actual development, we need to achieve this effect: (1) by clicking the button to pop the mode window, (2) After closing the modal window, refresh the parent window.
Through basic use, we can see the official website example is to click on a hyperlink after the modal dialog box pop-up.
Wait a minute.
But for actual development, we sometimes need to implement a modal dialog box that pops up by clicking the Button. In fact, a little modification can be achieved, because the previous article has been used to explain the use of this is directly on the code:
(1) Implement button click Popup modal dialog box
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>test.html</title>
<!--Greybox Reference started-->
<script type= "Text/javascript" >
var gb_root_dir = "./greybox/"; Notice the path here!!!
</script>
<script type= "Text/javascript" src= "Greybox/ajs.js" ></script>
<script type= "Text/javascript" src= "Greybox/ajs_fx.js" ></script>
<script type= "Text/javascript" src= "Greybox/gb_scripts.js" ></script>
<link href= "Greybox/gb_styles.css" rel= "stylesheet" type= "Text/css"/>
<!--greybox Reference end-->
<script type= "Text/javascript" >
Live popped modal window
function Openwincenter () {
Gb_showcenter (caption, URL,/* Optional/height, width, callback_fn)
Gb_showcenter ("Baidu", "http://www.baidu.com", 600, 900);
}
Full Screen pop-up modal window
function Openwinfull () {
Gb_showfullscreen (caption, URL, callback_fn)
Gb_showfullscreen ("Baidu", "http://www.baidu.com");
}
</script>
<body>
<input type= "button" value= "Center pop-up" onclick= "Openwincenter ()" ><br/>
<input type= "button" value= "Full Screen pop-up" onclick= "Openwinfull ()" ><br/>
</body>
The specific usage can be seen in the "Advance Usage" section of the official document.
(2) The development process will also encounter such problems, in the pop-up window after the operation, the need to refresh the parent window. How does it happen?
Let's take a look at the ordinary JS how to write
Copy Code code as follows:
<script language= "JavaScript" >
Pop-up window
function Opensubwin () {
window.open ("", "name1", "width=100,height=200,toolbar=no,scrollbars=no,menubar=no,screenx=100,screeny=100");
}
Close child windows, Refresh parent window
function Closesubwin () {
Window.opener.location = "http://www.baidu.com";
Window.close ();
}
</script>
How do you implement it if you use Greybox? On the code, "note" This JS is written in the child window's Web page:
Copy Code code as follows:
<script type= "Text/javascript" >
function Close () {
Parent.parent.location.reload ();
Parent.parent.GB_hide ();
}
</script>
Well, so far to complete the study of Greybox, these basic can meet our daily project needs.
