Rumah >hujung hadapan web >html tutorial >如何用css+js实现点击按钮弹出div层_html/css_WEB-ITnose

如何用css+js实现点击按钮弹出div层_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:55:152123semak imbas

一个界面上有一个按钮btn1,点击按钮弹出一个水平垂直居中的div层1,弹出的div层1 上又有一个按钮btn2,点击btn2时候同样弹出一个水平垂直居中div层2,第一个div层关闭。


回复讨论(解决方案)

div层1,div层2两个div都使用绝对定位,使之水平垂直居中,默认设置display属性为none;
btn1的点击响应事件中设置div层1 display:block;
btn2的点击响应事件中设置div层1 diaplay:none,div层2display:block;
...
大体思路这样吧,应该还有挺多细节性问题,慢慢琢磨吧... 

<head>    <title></title>    <style type="text/css">    .div1{position:absolute;display:none;}    .div2{position:absolute;display:none;}    </style>    <script type="text/javascript">        function div1Show() {            var div1 = document.getElementById("div1");            div1.style.display = "";        }        function div2Show() {            var div1 = document.getElementById("div1");            var div2 = document.getElementById("div2");            div1.style.display = "none";            div2.style.display = "";        }    </script></head><body>    <div id="div1" class="div1">    </div>    <div id="div2" class="div1">    <input type="button" value="btn2" id="btn2" onclick="div2Show()" />    </div>    <input type="button" value="btn1" id="btn1" onclick="div1Show()"/></body></html>

建议自己多思考思考

  <style>div{  position: fixed;display: none; width:100px;height:100px;  }    #div1{background: #F00;}#div2{background:#ccc;}</style>  <div id="div1"><input type="button" value="button2" onclick="document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='block';"/></div>  <div id="div2"></div>  <input type="button" value="button1" onclick="document.getElementById('div1').style.display='block';" />

再思考一下,是不是只用一个层,点击的btn1的时候,往层上放一个按钮(比如div.innerHTML = ''),并显示这个层,点击层上的按钮,把曾里面的内容替换成其他的或者清空(比如div.innerHTML = '')

建议自己多思考思考

点击查看 在线演示(点击右上角的Edit in JSFiddle可以在编辑页面查看源码)

再思考一下,是不是只用一个层,点击的btn1的时候,往层上放一个按钮(比如div.innerHTML = ''),并显示这个层,点击层上的按钮,把曾里面的内容替换成其他的或者清空(比如div.innerHTML = '')

点击click div的时候要弹出另外一个div,第一次弹出的div关闭。不是弹出文字。源代码直接复制到我的电脑上就看不到效果了





点击查看 在线演示(点击右上角的Edit in JSFiddle可以在编辑页面查看源码)


再思考一下,是不是只用一个层,点击的btn1的时候,往层上放一个按钮(比如div.innerHTML = ''),并显示这个层,点击层上的按钮,把曾里面的内容替换成其他的或者清空(比如div.innerHTML = '')

只有一个btn1.点击了啥都没有


<head>    <title></title>    <style type="text/css">    .div1{position:absolute;display:none;}    .div2{position:absolute;display:none;}    </style>    <script type="text/javascript">        function div1Show() {            var div1 = document.getElementById("div1");            div1.style.display = "";        }        function div2Show() {            var div1 = document.getElementById("div1");            var div2 = document.getElementById("div2");            div1.style.display = "none";            div2.style.display = "";        }    </script></head><body>    <div id="div1" class="div1">    </div>    <div id="div2" class="div1">    <input type="button" value="btn2" id="btn2" onclick="div2Show()" />    </div>    <input type="button" value="btn1" id="btn1" onclick="div1Show()"/></body></html>

建议自己多思考思考

演示代码使用了jQuery,直接复制代码的话,可能没有引用jquery文件,所以没有效果。
另外一个div是已经在页面中的吗?如果是的话,修改一下第二个按钮的click事件,显示另一个div就可以了。如果另一个div本来就不在页面上,那么没有必要一定要两个div,只需要替换div里面的内容就可以了。
至于2楼的代码,他写的时候可能没有测试过,按钮事件写反了。按他的代码,第一个按钮点击,应该是显示div2,他却是显示div1,而div1什么内容都没有,所以你看不到任何东西。
修改了他的代码,点击查看 原生js在线演示代码

点击click div的时候要弹出另外一个div,第一次弹出的div关闭。不是弹出文字。源代码直接复制到我的电脑上就看不到效果了

演示代码使用了jQuery,直接复制代码的话,可能没有引用jquery文件,所以没有效果。
另外一个div是已经在页面中的吗?如果是的话,修改一下第二个按钮的click事件,显示另一个div就可以了。如果另一个div本来就不在页面上,那么没有必要一定要两个div,只需要替换div里面的内容就可以了。
至于2楼的代码,他写的时候可能没有测试过,按钮事件写反了。按他的代码,第一个按钮点击,应该是显示div2,他却是显示div1,而div1什么内容都没有,所以你看不到任何东西。
修改了他的代码,点击查看 原生js在线演示代码


点击click div的时候要弹出另外一个div,第一次弹出的div关闭。不是弹出文字。源代码直接复制到我的电脑上就看不到效果了



另外一个div 是弹出的div1上的按钮(也就是show another div)出来的。 这个演示代码也是使用了JQuery吗? 只需要用div+css+js就可以了。我要怎么复制代码呢

没有使用任何js类库,下面是代码

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title></title><style type='text/css'>.Absolute-Center {    margin: auto;    position: absolute;    top: 0; left: 0; bottom: 0; right: 0;}.div1{    position:absolute;    display:none;    width: 300px;    height: 300px;    background-color: yellow;}.div2{    position:absolute;    display:none;    width: 500px;    height: 300px;    background-color: green;}</style><script type='text/javascript'>//<![CDATA[ function $(id) {    return document.getElementById(id);}function div2Show() {    var div2 = $("div2");    div2.style.display = "block";}function div1Show() {    var div1 = $("div1");    var div2 = $("div2");    div1.style.display = "block";    div2.style.display = "none";}//]]>  </script></head><body>    <div id="div1" class="div1 Absolute-Center">This is another DIV    </div>    <div id="div2" class="div2 Absolute-Center">        <input type="button" value="Show Another DIV" id="btn2" onclick="div1Show()" />    </div>    <input type="button" value="Click Me" id="btn1" onclick="div2Show()"/></body></html>

另外一个div 是弹出的div1上的按钮(也就是show another div)出来的。 这个演示代码也是使用了JQuery吗? 只需要用div+css+js就可以了。我要怎么复制代码呢



大爱你,3Q so much。。大概功能是这样的,然后我的界面比较大,有的滚动条,往下拉滚动条的话弹出的div不会随着一起动是吗?
代码中的// 这个注释是无关紧要的吗?(ps好像问的有点白痴了,恕我是菜鸟)




没有使用任何js类库,下面是代码


2个图片


现在的代码是会随滚动条滚动的。在IE11和Chrome34下测试过。
如果你不想弹出层滚动,可以把position设置成fixed。不过IE6不支持。
代码中的// 这个注释跟滚动条没什么关系。

大爱你,3Q so much。。大概功能是这样的,然后我的界面比较大,有的滚动条,往下拉滚动条的话弹出的div不会随着一起动是吗?
代码中的// 这个注释是无关紧要的吗?(ps好像问的有点白痴了,恕我是菜鸟

现在的代码好像不会随滚动条滚动的。在Google Chrome火狐浏览器下都不滚动的


在这个 在线演示页面查看一下。我测试的时候都是可以滚动的,不知道会不会是你页面其他CSS的影响。

现在的代码好像不会随滚动条滚动的。在Google Chrome火狐浏览器下都不滚动的


这两个是连着的,。我的意思是这个弹出层只显示在电脑屏幕的最开始的一页吗。到那个小组一览(截图底部)那里,然后小组一览继续往后拉,就没有弹出层了是吗? 是这个效果的。。
我原本以为是弹出层随滚动条一直垂直水平居中呢。见图
我测试的跟你的是一样的效果

[引用 15 楼 save4me 的回复:]

你的需求是固定,不是滚动。你把div1,div2, Absolute-Center中的position都改成fixed (因为我在这div1,div2都加了class Absolute-Center,所以你可以把这两个css里的position去掉,精简一点,修改起来也方便)。
但是我上面也说了,IE6不支持fixed,安卓和苹果手机的浏览器好像有些也不支持,本来跨浏览器css固定可以用position: absolute;的,可以因为你需要绝对居中,是以使用了top,bottom,left,right都设成0,这样就没法固定了,如果垂直居中不是特别重要,可以使用在IE6设成position: absolute;margin: 0 auto;,水平居中,然后设一个合理的top值,这样就能跨浏览器了。

这两个是连着的,。我的意思是这个弹出层只显示在电脑屏幕的最开始的一页吗。到那个小组一览(截图底部)那里,然后小组一览继续往后拉,就没有弹出层了是吗? 是这个效果的。。
我原本以为是弹出层随滚动条一直垂直水平居中呢。见图
我测试的跟你的是一样的效果

懒得分解代码之后再贴上来了,你可以参考下
或者直接拿过来用

//http://www.dada360.com/javascript/v1.2/jquery.js//http://www.dada360.com/javascript/v1.2/AtaiJs-1.2.js//引用上面的两js文件,可以把它们下载下来放自己网站//AtaiJs-1.2.js里的这个变量var _AtaiJsPath="http://www.dada360.com/javascript/v1.2/"是让js找到图片目录//你可以把这两张图也下载下来//图片一http://www.dada360.com/javascript/v1.2/images/promp-icon.png//图片二http://www.dada360.com/javascript/v1.2/images/close.jpg//让一个层垂直、水平居中的方法	var _dialog = new AtaiShadeDialog();	_dialog.init({		  obj: "#alert-box-control"		, sure: function(){alert('s');}		, cancel: function(){alert('c');}		, closeAfterCallback: true//执行完sure的方法后,是否自动关闭层		, CWCOB: true//点击透明遮罩的时候是否关闭层,false表示不关闭	});

<!--样式随便怎么定义,不过这个层最开始的display属性要是none--><div id="alert-box-control" class="dialog-box" style="display:none">	<div class="atai-shade-head" v="atai-shade-move"><!-- v="atai-shade-move"表示可以通过这个元素拖拽层,可以不设置-->		操作提示		<div class="atai-shade-close" v="atai-shade-close"> </div><!-- v="atai-shade-close"指定点击这个元素,关闭层,可以不设置-->	</div>	<div class="atai-shade-contents">		<div class="atai-shade-icon-box"><div class="atai-shade-icon atai-shade-success"></div></div>		<div class="atai-shade-text">操作成功!</div>	</div>	<div class="atai-shade-clear"></div>	<div class="atai-shade-bottom">		<input type="button" class="atai-shade-cancel" v="atai-shade-cancel" value="取消"/><!-- v="atai-shade-cancel"指定点击这个元素,执行cancel方法,可以不设置-->		<input type="button" class="atai-shade-confirm" v="atai-shade-confirm" value="确定"/><!-- v="atai-shade-confirm"指定点击这个元素,执行sure方法,可以不设置-->	</div></div>


<!--模拟js的alert方法,可以直接调用-->	<a href="javascript:;" onclick="jsbox.success('操作成功!')">成功</a>        <a href="javascript:;" onclick="jsbox.correct('正确')">正确</a>        <a href="javascript:;" onclick="jsbox.disallow('禁止')">禁止</a>        <a href="javascript:;" onclick="jsbox.disallow2('禁止2')">禁止2</a>        <a href="javascript:;" onclick="jsbox.alert('警告')">警告</a>        <a href="javascript:;" onclick="jsbox.error('错误')">错误</a>        <a href="javascript:;" onclick="jsbox.message('消息')">消息</a>        <a href="javascript:;" onclick="jsbox.remove('是否删除?', function(){alert('确定删除');}, null, function(){alert('取消删除');}, null)">删除</a>        <a href="javascript:;" onclick="jsbox.ok('OK')">OK</a>        <a href="javascript:;" onclick="jsbox.fail('失败')">失败</a>        <a href="javascript:;" onclick="jsbox.ask('询问', function(){alert('点了确定');})">询问</a>


//不喜欢那个透明遮罩的话,可以去改AtaiJs-1.2.js里的代码_this.createShadeBackground=function(){}//这个方法改下//AtaiJs-1.2.js第697行的"opacity" : _this.dialogCount>1 ? 0.1 : 0.3//直接改成"opacity" :0 把整个透明遮罩设为全透明

谢谢问题已解决啊。。拜你为师吧,如何
[引用 17 楼 save4me 的回复:]

谢谢。不可以用alert。要用div


Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn