彈出在後面（不Z - 索引）和如何功能關閉彈出鏈接

我創建彈出式JavaScript，顯示學校。但是當我點擊鏈接顯示彈出式窗口，在這背後彈出位置，我已經添加的z-index在CSS內聯，但不工作：「（彈出在後面（不Z - 索引）和如何功能關閉彈出鏈接

這是截圖 enter image description here

這是我的腳本..

<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>

而如何在鏈接（X）。此代碼關閉彈出..

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>';

幫助我.. pliss

來源

2015-04-14 Muhamad Ridwansyah

這是否只是要一個自定義警告框？ – Kano

是的..喜歡警報框但我定製它.. –

在您的HTML中構建自定義警報框，將CSS添加到單獨的CSS文件中，然後簡單地使用您的javascript *顯示它* - 像更改'display：none; ''顯示：塊;'或使用'不透明度'。我的意思是不要使用JavaScript來爲你寫字面值。否則，每次製作時都必須重新創建元素。在html中準備好它（這意味着它會在頁面加載時加載），並在javascript的幫助下使其可見。 – Kano

我創建了一個非常基本的我在評論解釋了事情fiddle：

讓你的「彈出式」或
隱藏它使用CSS
使用提醒準備爲一個HTML元素的簡單的Javascript顯示/通過添加和刪除CSS類

的HTML rehide它

<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>

和Javascript：

var popupBox = document.getElementById('alertContainer'); 
var x = document.getElementById('close'); 

function popup(){  
    popupBox.className = popupBox.className + 'show'; 
} 



$('#close').click(function() { 
    popupBox.className = ""; 
});

還有像SweetAlert可用的插件。

PS我沒有使用純JavaScript - 關閉按鈕點擊是使用jQuery（所以你必須導入你的HTML文件的標題）

來源

2015-04-14 20:16:36 Kano

Thank's bro .. :) –

彈出在後面（不Z - 索引）和如何功能關閉彈出鏈接

回答

相關問題