javascript用DIV模拟弹出窗口_窗体滚动跟随_javascript技巧-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

javascript用DIV模拟弹出窗口_窗体滚动跟随_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:01 PM

div

<title>可滚动跟随弹出框效果代码——脚本之家</title> 
<script> 
function getPosition() { 
var top = document.documentElement.scrollTop; 
var left = document.documentElement.scrollLeft; 
var height = document.documentElement.clientHeight; 
var width = document.documentElement.clientWidth; 
return {top:top,left:left,height:height,width:width}; 
}

function showPop(){ 
var width = 300; //弹出框的宽度 
var height = 160; //弹出框的高度 
var obj = document.getElementById("pop");

obj.style.display = "block"; 
obj.style.position = "absolute"; 
obj.style.zindex = "999"; 
obj.style.width = width + "px"; 
obj.style.height = height + "px";

var Position = getPosition(); 
leftadd = (Position.width-width)/2; 
topadd = (Position.height-height)/2; 
obj.style.top = (Position.top + topadd) + "px"; 
obj.style.left = (Position.left + leftadd) + "px";

window.onscroll = function (){ 
var Position = getPosition(); 
obj.style.top = (Position.top + topadd) +"px"; 
obj.style.left = (Position.left + leftadd) +"px"; 
}; 
}

function hidePop(){ 
document.getElementById("pop").style.display = "none"; 
} 
</script> 
 
 
作者：丁学－－滚动跟随 
<div id="pop" style="border:1px solid #CCC;display:none;">test <a href="javascript:hidePop();">hide</a>
</div> 
 
<a href="javascript:showPop()">show</a>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

Artikel Berkaitan

css怎么实现div缺一个角Jan 30, 2023 am 09:23 AM

css实现div缺一个角的方法：1、创建一个HTML示例文件，并定义一个div；2、给div设置宽高背景色；3、给需要删除一角的div增加一个伪类，将伪类设置成跟背景色一样的颜色，然后旋转45度，再定位到需要去除的那个角即可。

基于 ChatGPT API 的划词翻译浏览器脚本实现May 01, 2023 pm 03:28 PM

前言最近GitHub上有个基于ChatGPTAPI的浏览器脚本，openai-translator，短时间内star冲到了12k，功能上除了支持翻译外，还支持润色和总结功能，除了浏览器插件外，还使用了tauri打包了一个桌面客户端，那抛开tauri是使用rust部分，那浏览器部分实现还是比较简单的，今天我们就来手动实现一下。openAI提供的接口比如我们可以复制以下代码，在浏览器控制台中发起请求，就可以完成翻译//示例constOPENAI_API_KEY="s

div与span的区别有哪些Nov 02, 2023 pm 02:29 PM

区别有：1、div是一个块级元素，span是一个行内元素；2、div会自动占据一行，span则不会自动换行；3、div用于包裹比较大的结构和布局，span用于包裹文本或者其他行内元素；4、div可以包含其他块级元素和行内元素，span可以包含其他行内元素。

div盒模型是什么Oct 09, 2023 pm 05:15 PM

div盒模型是一种用于网页布局的模型，它将网页中的元素视为一个个矩形的盒子，这个模型包含了四个部分：内容区域、内边距、边框和外边距。div盒模型的好处是可以方便地控制网页布局和元素之间的间距，通过调整内容区域、内边距、边框和外边距的大小，可以实现各种不同的布局效果，盒模型也提供了一些属性和方法，可以通过CSS和JavaScript来动态地改变盒子的样式和行为。

iframe和div有什么不同Aug 28, 2023 am 11:46 AM

iframe和div的不同是iframe主要用于引入外部内容，可以加载其他网站的内容或将一个网页分割成多个区域，每个区域有自己的独立的浏览上下文，而div主要用于分割和组织内容的区块，用于布局和样式控制。

如何将两个div并排显示Nov 01, 2023 am 11:36 AM

方法有：1、将两个div元素设置为“float:left;”属性；2、使用CSS的flex布局可以轻松实现元素的并排显示；3、使用CSS的grid布局也可以实现元素的并排显示。

css div内容超出隐藏怎么实现Jan 28, 2023 pm 03:12 PM

css div内容超出隐藏的实现方法：1、通过css代码“overflow: hidden;”实现内容超出隐藏；2、通过js代码“var myBox = document.getElementById('demo');var mydemoHtml = myBox.innerHTML.slice(0, 20) +'......';”实现内容超出隐藏即可。

如何在css中让div居中Oct 12, 2023 am 10:07 AM

在css中让div居中的方法有使用margin属性、flexbox布局、绝对定位和使用grid布局等。详细介绍：1、使用margin属性，最简单的方法是使用margin属性，通过设置左右margin为auto，可以将div水平居中；2、使用flexbox布局，Flexbox是CSS3中引入的一种弹性盒子布局模型，可以方便地实现元素的居中；3、使用绝对定位，通过使用绝对定位等等。

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Repo: Cara menghidupkan semula rakan sepasukan

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang laluByDDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

3 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini