日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

jquery實現界面點擊按鈕彈出懸浮框_jquery

作者：lbb-luckly ? 更新時間： 2022-06-02 編程語言

本文實例為大家分享了jquery實現界面點擊按鈕彈出懸浮框的具體代碼，供大家參考，具體內容如下

首先定義兩個div:

一個是背景，一個是懸浮窗。

<input id="Button1" type="button" value="點擊彈出層"/>? ? ? ?
?? ??? ?<!--彈出層時背景層DIV-->
?? ??? ?<div id="fade" class="black_overlay"></div>
?? ??? ?<!-- 編輯框 可以加自己的樣式 -->
?? ??? ?<div id="MyDiv" class="white_content">
?? ??? ??? ?點擊陰影處退出！！！
</div>

css樣式：

<style>
?? ??? ??? ?.black_overlay {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0%;
? ? ? ? ? ? left: 0%;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? background-color: black;
? ? ? ? ? ? z-index: 1001;
? ? ? ? ? ? -moz-opacity: 0.8;
? ? ? ? ? ? opacity: .80;
? ? ? ? ? ? filter: alpha(opacity=80);
? ? ? ? }

? ? ? ? .white_content {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 10%;
? ? ? ? ? ? left: 10%;
? ? ? ? ? ? width: 80%;
? ? ? ? ? ? height: 80%;
? ? ? ? ? ? border: 16px solid lightblue;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? z-index: 1002;
? ? ? ? ? ? overflow: auto;
? ? ? ? }

? ? ? ? .white_content_small {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 20%;
? ? ? ? ? ? left: 30%;
? ? ? ? ? ? width: 40%;
? ? ? ? ? ? height: 50%;
? ? ? ? ? ? border: 16px solid lightblue;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? z-index: 1002;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
</style>

jquery方法：

<script type="text/javascript">
?? ??? ?$("#Button1").click(function() {
?? ??? ??? ?document.getElementById("MyDiv").style.display = 'block';
?? ??? ??? ?document.getElementById("fade").style.display = 'block';
?? ??? ??? ?var bgdiv = document.getElementById("fade");
?? ??? ??? ?bgdiv.style.width = document.body.scrollWidth;
?? ??? ??? ?$("#fade").height($(document).height());
?? ??? ?});
?? ??? ?//關閉彈出層
?? ??? ?$("#fade").click(function() {
?? ??? ??? ?document.getElementById("MyDiv").style.display = 'none';
?? ??? ??? ?document.getElementById("fade").style.display = 'none';
?? ??? ?});
</script>

效果圖：

原文鏈接：https://blog.csdn.net/bing_bg/article/details/104934223

欄目分類
最近更新