gpt4 book ai didi

从头开始没有库的javascript弹出窗口

转载 作者:行者123 更新时间:2023-11-29 19:45:31 25 4
gpt4 key购买 nike

我正在尝试在不使用 jquery、scriptaculous、原型(prototype)或任何库的情况下在 javascript 中实现灯箱/模式框类型的弹出窗口。我在 stackoverflow 上找到了一个很好的开始:

How to code a JavaScript modal popup (to replace Ajax)?(没有必要在这里重复代码)

我尝试进行简单的更改并且一切正常,我什至添加了 HTML 内容并且它有效,但我坚持添加滚动条,我做了我的研究并没有发现任何东西,因为你在谷歌上得到的几乎每个答案都是基于 jquery (甚至我上面提到的问题的所有其他答案都包括 jquery!)任何建议或链接都​​会很棒,

谢谢

最佳答案

我认为这篇名为“CSS OVERLAY TECHNIQUES”的文章会对您有所帮助。 http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

它提供了几种无需 jquery 即可完成上述任务的方法。

例如,通过此链接描述的技术之一是:

TECHNIQUE #1: ABSOLUTELY POSITIONED ELEMENT

The first way that an overlay can be created is by absolutely positioning an HTML element on the page. There would be an empty div in the markup, and with CSS this div is positioned absolutely and given a high z-index value to make sure it stays on top of all other elements on the page, except the modal which is opened on top of this overlay, which will get a even higher z-index than the overlay.

<html>
<body>
<div class="overlay"></div>
<!--...-->
<body>
<html>

Supposing we have already added an empty div to the markup and given it a class .overlay, the CSS to position this overlay on the page is:

html, body{
min-height: 100%;
}
body{
position: relative;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}

关于从头开始没有库的javascript弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20032424/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com