ホームページ >ウェブフロントエンド >htmlチュートリアル >button_html/css_WEB-ITnose をクリックしたときに css+js を使用して div レイヤーをポップアップする方法
button_html/css_WEB-ITnose をクリックしたときに css+js を使用して div レイヤーをポップアップする方法
- WBOYオリジナル
- 2016-06-24 11:55:152123ブラウズ
インターフェイス上にボタン btn1 があり、ボタンをクリックすると、水平方向と垂直方向の中央に配置された div レイヤー 1 がポップアップします。ポップアップ div レイヤー 1 には別のボタン btn2 があります。btn2 をクリックすると、水平方向と垂直方向に中央に配置された div レイヤー 2 も表示されます。最初の div レイヤーが閉じられます。
ディスカッションへの返信 (解決策)
div レイヤー 1 と div レイヤー 2 の両方の div は、水平方向と垂直方向の中央に配置するために絶対位置を使用します。 デフォルトの表示属性は none に設定されます。 btn1 の応答イベント レイヤ 1 表示: block;
btn2 のクリック応答イベントでは、 div レイヤ 1 diaplay:none、div レイヤ 2 表示: 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> もう一度考えて、レイヤーを 1 つだけ使用し、btn1 をクリックしたら、そのレイヤーにボタンを配置します。 ( div.innerHTML = '0c16b92449d9b693e22282104a6f8a58' のように)、このレイヤーを表示し、レイヤー上のボタンをクリックします。コンテンツを他のものに置き換えるかクリアします (例: div.innerHTML = '')
もっと考えてみることをお勧めします
クリックしてオンライン デモを表示します (右上隅の [JSFiddle で編集] をクリックします)。編集ページでソース コードを表示します)
もう一度考えてください。レイヤーは 1 つだけ使用する必要がありますか? btn1 をクリックするときに、レイヤーにボタンを配置します (div.innerHTML = '354dbd34e2acf35df9f85840607a8ed9') してこのレイヤーを表示し、レイヤー上のボタンをクリックして内部のコンテンツを他のコンテンツに置き換えるかクリアします (div.innerHTML など) = '')
click div をクリックすると、別の div がポップアップします。最初にポップアップしたとき、div は閉じられています。ポップアップテキストではありません。ソース コードをコンピューターに直接コピーした場合、効果は表示されません
をクリックしてオンライン デモを表示します (編集中のソース コードを表示するには、右上隅の [JSFiddle で編集] をクリックします)。ページ)
もう一度考えてみてください。btn1 をクリックしたときに、そのレイヤーにボタンを配置します (例: div.innerHTML = '49e8c7afa6b0e2b9e6c205bcd5c762ae') してこのレイヤーを表示し、レイヤー上のボタンをクリックして、内部のコンテンツを他のコンテンツに置き換えるかクリアします (div.innerHTML = ' など) ')
<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';" />
もっと考えてみることをお勧めします
別の div がすでにページ上にありますか?その場合は、2 番目のボタンのクリック イベントを変更して、別の div を表示します。他の div がページ上にない場合は、2 つの div を持つ必要はなく、div 内のコンテンツを置き換えるだけです。
2 階のコードに関しては、作成時にテストを行っていなかったため、ボタン イベントが逆に書かれていた可能性があります。彼のコードによると、最初のボタンをクリックすると div2 が表示されるはずですが、div1 が表示され、div1 にはコンテンツがないため、何も表示されません。
コードを変更しました。クリックしてネイティブ JS オンライン デモ コードを表示します
click div をクリックすると、別の div がポップアップし、ポップアップした最初の div が閉じます。ポップアップテキストではありません。ソースコードをコンピューターに直接コピーしても効果は見られません
コードを直接コピーすると、jQuery ファイルが参照されない可能性があるため、効果はありません。 。
別の div がすでにページ上にありますか?その場合は、2 番目のボタンのクリック イベントを変更して、別の div を表示します。他の div がページ上にない場合は、2 つの div を持つ必要はなく、div 内のコンテンツを置き換えるだけです。
2 階のコードに関しては、作成時にテストを行っていなかったため、ボタン イベントが逆に書かれていた可能性があります。彼のコードによると、最初のボタンをクリックすると div2 が表示されるはずですが、div1 が表示され、div1 にはコンテンツがないため、何も表示されません。
コードを変更しました。クリックしてネイティブ JS オンライン デモ コードを表示します
クリック 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不会随着一起动是吗？
代码中的//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