html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年4月25日 星期三

自製 彈出對話視窗

自製 彈出對話視窗




<style>
#div18425848 {Width:100%;Height:100%;background-color:rgba(192,192,192,0.6); display:none ;position:fixed;top:0;left:0;z-index:1000}
</style>

<script type="text/javascript">
function Cclose(){
var dd = document.getElementById('div18425848');
var d = document.getElementById('alert18425848');
d.style.display = "none";
dd.style.display = "none";
document.body.style.overflow="scroll"; }

function Copen(){
var dd = document.getElementById('div18425848');
var d = document.getElementById('alert18425848');
var d_width = d.style.width;
    d_width = d_width.substring(0,d_width.length-2 )
var d_height = d.style.height;
    d_height = d_height.substring(0,d_height.length-2 )

var Ww = (document.documentElement.clientWidth-d_width )   /2   ;
var Hh = (document.documentElement.clientHeight-d_height) / 2 ;
d.style.left = Ww +'px';
d.style.top = Hh +'px';
d.style.display = "block";
dd.style.display = "block";
document.body.style.overflow="hidden";
}
</script>

<input type="button" style="background-color: #008CBA; color: white;" onclick="Copen()" value="???" >
<div id ="div18425848" ></div>
<div id="alert18425848" style="box-shadow: 15px 15px 10px 0px rgba(20%,20%,40%,0.5);z-index:1000;
background-color: #ffd382;height: 100px; text-align: center; width: 150px;display:none;position:fixed;top:0;left:0;">
<center>
自製 彈出對話視窗<br />
<button type="button" onclick="Cclose()">close</button>
</center>
</div>

沒有留言:

張貼留言