Dom operation related case modal dialog box, simple message board, JS analog selector hover,tab tab, shopping cart case

1. Modal Box case

Demand:

When you open a Web page there is a normal button, click the current button to display a background map, center and pop up a popup box, click on the X will close the current modal box

The code is as follows:

<!        DOCTYPE html>2. Simple message Board
Demand:
When you enter content in textarea, click the Message button and it will be added to the browser.
The figure is as follows:
The code is as follows:
<!        DOCTYPE html>
3. Using the JS analog selector hover
<! DOCTYPE html>
Code Explanation:
Mouse hover, the current bar color, here to use the idea of exclusivity: first put all the buttons of the classname set to empty, and then put me (this) the button classname set to current, you can achieve the effect of discoloration. The core code is:
            Exclusive thought: Set the classname of all the buttons to empty first, then set the classname of this button to the current            //exclusive idea and the For loop with for            (Var j=0;j< btnarr.length;j++) {                btnarr[j].classname = "";            }            This.classname = "current";
4.tab Column Tab
The code is as follows:
<!        DOCTYPE html>5. Shopping Cart Case
The code is as follows:
<! DOCTYPE html>
Dom operation related case modal dialog box, simple message board, JS analog selector hover,tab tab, shopping cart case