CODEWITHSUNDEEP
javascriptphppopup
Maestro Vladimir
Maestro Vladimir

Reputation: 1196

Pop Up in Behind (Not z-index) and how to function close popup in link

i create popup javascript, for show school. But when i click link show popup, this popup position in behind, i already add z-index in css inline but does not work :'(

This is screenshot enter image description here

This is my 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">&nbsp;  <img  style="border:1px solid #369ace; padding: 5px 30px;"  width="160px" height="160px" src="images/sekolah/logo/'+logo+'"></td>';

    h +='<td>&nbsp; &nbsp; <i class="fa fa-home fa-2x"></i> <font color="black">'+address+'</td>';
    h +='<tr><td>&nbsp; &nbsp;  <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> &nbsp; &nbsp;</td>';
    h +='<td><div style="border-radius: 3px; border:1px solid #369ace; padding: 5px 3px;">  <font color="black">Ket: <br/>  &nbsp;'+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;">&times;</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 * from 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 to close popup in link (X). This 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;">&times;</a>';

Help me.. pliss

Upvotes: 0

Views: 637

Answers (1)

kano
kano

Reputation: 5926

I've created a very basic fiddle of the things I explained in the comments:

  • Have your 'popup' or alert ready as an HTML element
  • Hide it using CSS
  • Use your Javascript simply to show/rehide it by adding and 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>
            I fight dragons with tooth picks. Rawrr!
        </p>        
        <span id="close">&times;</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 also plugins like SweetAlert available.

ps I didn't use pure javascript - the close buttons click is with jQuery (so you'd have to import that in your HTML file's header)

Upvotes: 1

Related Questions