一個能彈出dialog的htmlcss實(shí)現(xiàn)

<style>
.b {
background-color: rgba(0, 0, 0, 0.3);
height: 100%;
width: 100%;
float: left;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}

.b div {
    height: 50%;
    width: 50%;
    background-color: yellow;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.a {
    background-color: red;
    height: 100%;
    width: 100%;
    color: black;
    position: relative;
}

</style>

<script language="javascript">

function DisplayDialog(divId) {
    document.getElementById(divId).style.display ="block";
}

function CloseDialog(divId) {
    document.getElementById(divId).style.display ="none";
}

</script>

<div class="a">
<div class="dasd">
<span onClick="DisplayDialog('aa')" style="cursor:pointer;">sadasdas</span>
<input type="checked" />
</div>
<div class="b" id="aa">
<div>
<input type="radio" name="sadas">
<span>asdasdas</span>
<input type="radio" name="sadas">
<span>asdasdas</span>
<button onClick="CloseDialog('aa')" style="cursor:pointer;">Close</button>
</div>
</div>
</div>
</div>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,700評論 0 8
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱: 工作地點(diǎn) 崗位名...
    lilyping閱讀 1,902評論 0 1
  • 本書介紹 你是不是對Django的學(xué)習(xí)感到迷茫?是不是對網(wǎng)上零星的教程感到絕望?是不是苦于沒有可以迅速上手的實(shí)例而...
    阡陌3536閱讀 1,334評論 0 0
  • 寫作,是荒廢人生最好的借口,除非萬不得已,不要拿起筆。——冰雞湯002 寫作是一件有趣的事情。至少于我如此。思想碎...
    半步之人閱讀 2,478評論 39 24
  • 首發(fā)自我的微信公眾號:今天也吐槽 掃黃案或許是Z老師肅清班級風(fēng)氣的一個偶然事件,但同時也是貫徹他“揭發(fā)他人、保全自...
    段叉閱讀 534評論 0 0