Implementation of pop-up box effects based on JavaScript _ javascript skills

The pop-up box is an essential part of the website page. Today, I will share with you how to use js to implement a simple pop-up box, if you are interested in learning it together, the pop-up box is an essential part of the website page. Today, I will share with you the result of using js to implement a simple pop-up box. This article is not well written, sorry!

First, we will analyze the components in the pop-up box. the Simple pop-up box is divided into the header, content, and tail. there are titles and close buttons in the header, and the content can be text, media, iframe, flash, etc. The end is the button (OK, cancel, etc.). I will not add the button at the end of this example, this example is the core part of the pop-up box.

 
Message X
The pop-up box is displayed.

In the pop-up box, when the header is pressed, the movement mode is enabled and the movement is disabled when the header is released. In fact, this is the meaning. Of course, the logic is relatively simple.

Here we may have thought of several variables, moving X and Y coordinates, moving switches and prohibitions, and then adding onmousedown and onmouseup events to the title.

The onmousedown event mainly enables moving.

In the onmouseup event, the logic is to close the move and disable the Move dialog box.

Next, you need to move the data, and move the data within a certain range. here we move in the body. therefore, the onmousemove event is added to the body. what we do here is to move the position of the pop-up box.

These three events mainly match the position attribute in CSS and the coordinates of the attribute in Event Events in JS.

Var pop = document. getElementsByClassName ("pop") [0]; var pop_title = pop. getElementsByClassName ("pop-title") [0]; var bd = document. body; var x = 0; var y = 0; var ismove = false; // whether to move var downx = 30; var downy = 30; pop_title.onmousedown = function (e) {x = e. pageX; y = e. pageY; downx = e. offsetX; downy = e. offsetY; ismove = true;} bd. onmousemove = function (e) {if (ismove) {var cx = e. pageX-downx; var cy = e. pageY-downy; pop. style. left = cx + "px"; pop. style. top = cy + "px"; x = e. x; y = e. y;} e. preventDefault ();} pop_title.onmouseup = function (e) {x = e. pageX; y = e. pageY; ismove = false; console. log ("Mobile completed ")}

After the pop-up box is moved, we add a close event to the close button.

// Close var pop_close = pop. getElementsByClassName ("pop-close") [0]; pop_close.onclick = function () {pop. parentNode. removeChild (pop );}

All right, the simple pop-up box is implemented. You can optimize the encapsulation of the same Code and add other functions. You may need to handle the compatibility problem yourself (earlier than IE9 ).

Js implementation pop-up box effects will be introduced to you so much, I hope to help you!