Home >Web Front-end >HTML Tutorial >How to use css js to pop up the div layer when clicking the button_html/css_WEB-ITnose
How to use css js to pop up the div layer when clicking the button_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:55:152123browse
There is a button btn1 on an interface. Clicking the button pops up a horizontally and vertically centered div layer 1. There is another button btn2 on the popup div layer 1. When btn2 is clicked, a horizontally and vertically centered div layer 2 also pops up. The first The div layer is closed.
Reply to the discussion (solution)
Both divs in div layer 1 and div layer 2 use absolute positioning to center them horizontally and vertically, the default setting The display attribute is none;
In the click response event of btn1, set div layer 1 display:block;
In the click response event of btn2, set div layer 1 diaplay:none, div layer 2 display:block;
.. .
This is the general idea. There should be a lot of details. Let’s think about it slowly...
<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> I suggest you think more about it
<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';" /> Think again, should you use only one layer? When you click btn1, put a button on the layer (such as div.innerHTML = '0c16b92449d9b693e22282104a6f8a58'), and display this layer, click the button on the layer, replace the content inside with other ones or clear it (such as div.innerHTML = '')
I suggest you think more about it
Click to view the online demonstration (click Edit in JSFiddle in the upper right corner to view the source code on the editing page)
Think about it again, right? Use only one layer. When you click btn1, put a button on the layer (such as div.innerHTML = 'dd8f26ad1bf0ebe91029d9cfd598ecba'), and display this layer, click the button on the layer to replace the content inside with other ones or clear it (such as div.innerHTML = '')
When clicking the div To pop up another div, the first div that popped up is closed. Not pop-up text. I can’t see the effect if I copy the source code directly to my computer
Click to view the online demo (click Edit in JSFiddle in the upper right corner to view the Edit page to view the source code)
Think again, should you use only one layer? When you click btn1, put a button on the layer (such as div.innerHTML = 'ad14d0f1243d425fde3415fc42362bf4'), and display this layer. Click the button on the layer to replace the content inside with other ones or clear it (such as div .innerHTML = '')
There is only one btn1. Nothing happens after clicking
<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> I suggest you think more.
The demo code uses jQuery. If you copy the code directly, the jquery file may not be referenced, so it will have no effect.
Is there another div already on the page? If so, just modify the click event of the second button and display another div. If the other div is not on the page, there is no need to have two divs, just replace the content inside the div.
As for the code on the second floor, he may not have tested it when he wrote it, and the button events were written backwards. According to his code, when the first button is clicked, it should display div2, but it displays div1, and div1 has no content, so you can't see anything.
Modified his code, click to view the native js online demo code
When you click on the click div, another div will pop up, and the first div that pops up will be closed. Not pop-up text. If you copy the source code directly to my computer, you won’t see the effect.
The demo code uses jQuery. If you copy the code directly, the jquery file may not be referenced, so there will be no effect.
Is there another div already on the page? If so, just modify the click event of the second button and display another div. If the other div is not on the page, there is no need to have two divs, just replace the content inside the div.
As for the code on the second floor, he may not have tested it when he wrote it, and the button events were written backwards. According to his code, when the first button is clicked, it should display div2, but it displays div1, and div1 has no content, so you can't see anything.
Modified his code, click to view the native js online demo code
When you click the click div, another div will pop up, and the first div that pops up will be closed. Not pop-up text. I can’t see the effect if I copy the source code directly to my computer
另外一个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不会随着一起动是吗？
代码中的//2297aa0ca7f3b47ef8e76f980fe5d83b 这个注释是无关紧要的吗？（ps好像问的有点白痴了，恕我是菜鸟）
没有使用任何js类库，下面是代码
2个图片
现在的代码是会随滚动条滚动的。在IE11和Chrome34下测试过。
如果你不想弹出层滚动，可以把position设置成fixed。不过IE6不支持。
代码中的//2297aa0ca7f3b47ef8e76f980fe5d83b 这个注释跟滚动条没什么关系。
大爱你，3Q so much。。大概功能是这样的，然后我的界面比较大，有的滚动条，往下拉滚动条的话弹出的div不会随着一起动是吗？
代码中的//2297aa0ca7f3b47ef8e76f980fe5d83b 这个注释是无关紧要的吗？（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