<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>弹窗</title> </head><style>#close:hover{ background-color:#aa1111;border-color:#aa1111;}</style><body><button onclick='show("demo")'>show</button><dialog open id='demo' style='display:none;' draggable="true"><div style="float:left;font-size:6px;font-weight:bold;">这是一个弹窗</div><div style="float:right;border:0px;font-size:6px"><button id='close' style="height:15px;width:20px;color:#ffffff;border:2px;border-color:#f3f3f3;font-size:5px;border-radius:3px;" onclick="getElementById('demo').setAttribute('style','display:none')">×</button></div> <div style="clear:both"><p>弹窗文件测试，小哥哥快来玩啊！</p></div><div style="float:right;"><button style="color:#ffffff;background:#aa1111;border:0px;font-size:5px;border-radius:3px;display:inline-block;" onclick="getElementById('demo').setAttribute('style','display:none')">关闭</button><button style="color:#ffffff;background:#bebcc3;border:0px;font-size:5px;border-radius:3px;display:inline-block;" onclick="getElementById('demo').setAttribute('style','display:none')">取消</button></div></dialog><script>function show(id){document.getElementById(id).setAttribute('style','display:block;padding:2px;border: medium double #bebcc3;border-radius:5px;')}</script></body></html>
