<style> #dianji {width: 150px;height: 50px;margin-top: 10px;margin-left: 10px; border: 1px solid #eee; background-color: red;display: none;} </style><body> <input type= "checkbox" id= "box" >< label for= "box" > Remember password </label><div id= "Dianji" > After selection, the password is saved for two weeks </div></body>< script src=script/jquery-1.11.3.js></script><script> //Native JS Implementation/* Window.onload=function () {Var boxobj=document.getelementbyid (' box '); var dianjiobj= document.getElementById (' Dianji '); Boxobj.addeventlistener ("Click", Function () {dianjiobj.style.display= "block";} , false) Boxobj.addeventlistener ("Mouseout", function () {dianjiobj.style.display= "none";},false)}*///jquery implements $ ( Function () {$ ("#box"). Bind ("click", Function () {$ ("#dianji"). CSS ("Display", "block");//$ ("#dianji"). Show (); Same as above code}); $ ("#box"). Bind ("Mouseout", function () {$ ("#dianji"). CSS ("DisplaY "," none "),//$ (" #dianji "). Hide ();})}) </script>:
650) this.width=650; "src=" http://s5.51cto.com/wyfs02/M02/7E/D9/wKioL1cLE52h1ujYAAAID41oJsQ629.jpg "title=" 7.jpg " alt= "Wkiol1cle52h1ujyaaaid41ojsq629.jpg"/>
When selected, a prompt box pops up:
650) this.width=650; "src=" http://s4.51cto.com/wyfs02/M01/7E/DC/wKiom1cLEwKyadRZAAARUus4AwQ292.jpg "title=" 7.1. JPG "alt=" wkiom1clewkyadrzaaaruus4awq292.jpg "/>
After removing the mouse, the prompt box is canceled.
This article is from the "dream need to adhere to" blog, please be sure to keep this source http://xiyin001.blog.51cto.com/9831864/1762527
JS implementation Prompt box, small example