javascript - Pop Up in Behind (Not z-index) and how to function close popup in link -
i create popup javascript, show school. when click link show popup, popup position in behind, add z-index in css inline not work :'(
this screenshot 
this script..
<html> <?php include "connection.php";?> <script> function profile(kode,logo,address,ket,name,status,phone) { var data =''+kode+''; var h =''; h +='<div style="background-color:#ffffff; z-index:9999999;" id="profilenya" >'; h +='<div style="background-color:#ffffff; z-index:9999999;">'; h +='<br/><h2 style="background-color:#359ace; width: auto;"><center>'+name+'</center></h2><br/>'; h +='<table><tr><td rowspan="2"> <img style="border:1px solid #369ace; padding: 5px 30px;" width="160px" height="160px" src="images/sekolah/logo/'+logo+'"></td>'; h +='<td> <i class="fa fa-home fa-2x"></i> <font color="black">'+address+'</td>'; h +='<tr><td> <i class="fa fa-phone fa-2x"></i> <font color="black">'+phone+'</td></tr>'; h +='<tr height="20px"><td></td><td></td></tr>'; h +='<tr><td><center style="border:1px solid #369ace; padding: 5px 3px;" >klik disini untuk mendukung <br/>agar sekolah ini menampilkan <br/>brosur online</center> </td>'; h +='<td><div style="border-radius: 3px; border:1px solid #369ace; padding: 5px 3px;"> <font color="black">ket: <br/> '+ket+' </div></td></tr>'; h +='<tr height="10px"><td></td><td></td></tr>'; h +='</table>'; h +='<a href="#" id="closedialog" style="display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold;">×</a>'; h +='</div>'; h +='</div>'; $('body').append(h); $('#profilenya').dialog({ resizable: true, width: 420, height: 300, position: { my: 'center', at: 'center', of: window }, modal: true }); } </script> <?php $data_school=mysql_query("select * school"); $i=0; while($school = mysql_fetch_object($data_school)) { $i++ echo "".$i."<a onclick=\"profile('".$row['kode']."','".$row['logo']."','".$row['address']."','".$row['ket']."','".$row['name']."','".$row['status']."','".$row['phone']."');\" ><h4>".$row['name']."</h4></a>"; } ?> </html> and how close popup in link (x). code..
h +='<a href="#" id="closedialog" style="display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold;">×</a>'; help me.. pliss
i've created basic fiddle of things explained in comments:
- have 'popup' or alert ready html element
- hide using css
- use javascript show/rehide adding , removing css classes
the html
<div id="main"> <button type="button" id="clck" onclick="javascript:popup();">clicky?</button> </div> <div id="alertcontainer"> <div id="alertcontent"> <p> fight dragons tooth picks. rawrr! </p> <span id="close">×</span> </div> </div> and javascript:
var popupbox = document.getelementbyid('alertcontainer'); var x = document.getelementbyid('close'); function popup(){ popupbox.classname = popupbox.classname + 'show'; } $('#close').click(function() { popupbox.classname = ""; }); there's plugins sweetalert available.
ps didn't use pure javascript - close buttons click jquery (so you'd have import in html file's header)
Comments
Post a Comment