GreyBox technical summary (transfer)_javascript skills

Similar to thinkbox, lightbox, etc. Used to display pages, pictures or other content in a unique modal dialog box. This is its official website: http://orangoo.com/labs/GreyBox/

Let’s take a look at a few examples:

(1) Open the web page:

(2) Display a set of pictures:

Basic use

(1) Enter the official website and click to download

(2) Unzip. (The installation.html in it explains its use. It is very simple and can be understood at a glance. I’ll just write down the steps)

(3) Copy the graybox folder to the root directory of the web project, Note: must be placed in the web root directory and in other directories Or whether the secondary directory can be used? This is how it is deployed in my project :

　(By the way, here’s a lesson. I put it in the js folder at first, because all my js scripts are in it, and jQuery is also there, but it just can’t be used... Finally, I put it in the root directory. It can be used after downloading )

(4) Now it can be used. We use a test page to test. The code is as follows:

Copy the code The code is as follows:

< link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />



Baidu

This completes the basic use.
　However, in actual development, we need to achieve the following effects: (1) Pop up the modal window by clicking the button; (2) After closing the modal window, refresh the parent window.
Through basic use, we can see that the examples on the official website all pop up a modal dialog box after clicking a hyperlink.

Wait.

But for actual development, we sometimes need to pop up a modal dialog box by clicking Button. In fact, it can be implemented with slight modifications. Since the previous article has already explained the use, I will go directly to the code this time:

(1) Implement button click to pop up a modal dialog box

Copy code The code is as follows:

< link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

You can see the specific usage "Advance Usage" section of the official documentation.
(2) During the development process, we will also encounter such a problem. After operating the pop-up window, the parent window needs to be refreshed when closing. How to achieve it?
Let’s first take a look at how ordinary js is written

Copy the code The code is as follows:

So how to achieve it if using GreyBox? Above code, [Note] This js is written in the web page of the sub-window:

Copy the code The code is as follows:

Okay, now we have completed the study of GreyBox, which can basically meet our daily project needs.