js弹出框

最新推荐文章于 2024-05-20 15:39:24 发布

meiyounihao

最新推荐文章于 2024-05-20 15:39:24 发布

阅读量150

点赞数

分类专栏： web前端技术文章标签： js 弹出框 web前端 ViewUI

本文链接：https://blog.csdn.net/meiyounihao/article/details/84511022

版权

web前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以前总是看到很多的弹出框，样式各异。很多是用的第三方插件，总觉得没有追溯到根本。这次，我用单纯的js、html写了一个弹框例子，希望能够给各位一个小参考，共同学习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="t.css">

<title>弹出窗口</title>
<script>
function show(tag){
 var light=document.getElementById(tag);
 var fade=document.getElementById('fade');
 light.style.display='block';
 fade.style.display='block';
 }
function hide(tag){
 var light=document.getElementById(tag);
 var fade=document.getElementById('fade');
 light.style.display='none';
 fade.style.display='none';
}
</script>
</head>
<body>
<a href="javascript:void(0)" οnclick="show('light')">弹框打开ONE</a> <a href="javascript:void(0)" οnclick="show('light2')">弹框打开TWO</a>
<div id="light" class="t1_content">
 <div  class="t1">
  <div  class="top">
    <p>弹窗标题</p>
    <a href="javascript:void(0)" οnclick="hide('light')"><img src="images/t1/but_2.png" border="0" ></a></div>
  <div  class="nr"> 弹窗内容，可固定高度，或者改自适应高度
    <p>
      <input  href="javascript:void(0)" οnclick="hide('light')"  type="button"  class="but_1"  value="确定"/>
    </p>
  </div>
  <div  class="fot"> </div>
</div>

</div>
<div id="light2" class="t2_content">
  <div  class="t2">
  <div  class="top">
    <p>弹窗标题</p>
    <a href="javascript:void(0)" οnclick="hide('light2')"><img src="images/t2/but_1.png" border="0" ></a></div>
  <div  class="nr"> 弹窗内容，可固定高度，或者改自适应高度 </div>
  <div  class="fot">
    <p> <a href="javascript:void(0)" οnclick="hide('light2')"><img src="images/t2/but_2.png" border="0" ></a> </p>
  </div>
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

附件中是css样式和图片代码

meiyounihao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js弹出框

以前总是看到很多的弹出框，样式各异。很多是用的第三方插件，总觉得没有追溯到根本。这次，我用单纯的js、html写了一个弹框例子，希望能够给各位一个小参考，共同学习：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...
复制链接

扫一扫