Using jquery
UI = { $close: $ ('. Close ') , $pop: $ ('. Pop ') , $topopBtn: $ ('. topop-btn ') , $popbtnArea: $ ('. Popbtn-area ') }; // bind open pop-up window UI. $popbtnArea. On (' click ', '. Topop-btn ',function() { UI. $pop. EQ ($ (this ). Index ()). Show (); }) // Close the pop-up window UI. $close. On (' click ',function() { UI. $pop. Hide (); });
Native JS Code
UI. $pop = Document.getelementsbyclassname (' Pop '); UI. $topopBtn= Document.getelementsbyclassname (' topop-btn '); UI. $close= Document.queryselectorall ('. Close ')); for(varI=0;i<ui. $topopBtn. length;i++{UI. $topopBtn [I].index=i;} //Open the Pop -up window for(varI=0;i<ui. $topopBtn. length;i++{UI. $topopBtn [I].onclick=function() {UI. $pop [ This. Index].style.display = ' block '; } } //Close closes the pop -up window for(varI=0;i<ui. $close. length;i++{UI. $close [I].onclick=function(){ This. ParentNode.style.display = ' None '; } }
There are mistakes or better ways to welcome comments
The best way to bind popup events, native JS and jquery methods