HTML+CSS+JS实现点击超链接弹出文本框效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS+JS实现点击超链接弹出文本框效果相关的知识，希望对你有一定的参考价值。
我点那个申请加入，弹出一个文本框，可输入文字的，我用的事绝对定位，所以点击左边那个申请加入和点击右边那个申请加入出现的文本框在同一个位置，怎么样可以使那个弹出的文本框位置在申请加入旁边。
如果是第二种情况，那就来说说绝对定位是如何进行定位的。
我们的说法是绝对定位，但其实是相对的，它需要一个相对基准点，来进行定位。如果绝对定位的父标签设置了属性position: relative;，那这个父标签就是它的基准点，相对于这个父标签的偏移量来绝对定位。如果所有的父标签都没有设置那个属性，那就不好办了，它会跑到最上面去，以body进行定位。明白了这个就好办了，给弹出框的父标签加上属性position: relative，再调整一下偏移量（就是left或right，top或bottom的值）就可以了。
为什么先说第二种情况呢？因为第一种情况比较麻烦，而且也要知道绝对定位是如何进行定位的才行。需要用JS判断点击的申请加入是哪一个，根据点击的这个按钮的位置来计算偏移量，再进行定位。
写了这么多字累了，才发现没有悬赏分。追问
你说的这种方法我已经实现，这样子我要给每一个弹出框设置top和left的值，我现在想让做好第一个，然后复制个7、8个，我点每一个的申请加入，他弹出的窗口都在申请加入旁边，结果我现在是复制7、8个，点每一个的申请加入，弹出的窗口都在第一个申请加入旁边。
追答那就是第二种情况了，原生JS我不是很清楚，Jquery中有个方法很好用offset()，用它可以获取到元素的偏移量，有两个值offset().top，offset().left，用这个方法获取到鼠标点击的申请加入的偏移量，再加上一个数字，然后赋值给弹出框，弹出框就会出现在你点的申请加入的旁边了
参考技术A 用$(this). 获取更靠谱一点。你可以试试，同时，绝对定位的元素若父元素也是定位的则不会出现这种情况。 参考技术B
自己算算吧
追问恕我愚昧，这是神马？
追答用这个，可以算出你那个“申请加入”的绝对位置，然后定位你的“弹出框”的位置
参考技术C 既然是设置的绝对定位，你给弹出的框的y加一个按钮的宽度就好了嘛。javascript实现弹出登陆框效果
- 先来看看效果吧
- 初始情况下
2.点击登陆按钮
3.点击close按钮，或者单击灰色区域后，登陆窗口会消失。
- html结构
<body> <span class="btn" id="BTN">login</span> </body>
- css样式
*{ margin: 0; padding: 0; } .btn{ position: absolute; top: 50px; right: 100px; display: block; width: 100px; height: 50px; background-color: #ccc; line-height: 50px; text-align: center; cursor: pointer; } #login{ z-index: 3; width: 500px; height: 500px; border: 1px solid #fff; position: fixed; top: 50%; left: 50%; margin-left: -250px; margin-top: -250px; background-color: #ccc; } .close{ position: absolute; top: 10px; right: 20px; display: block; width: 80px; height: 40px;border: 1px solid #666; line-height: 40px; text-align: center; cursor: pointer; } #BG{ background-color: rgba(0,0,0,0.6); z-index: 2; }
- javascript代码
<script type="text/javascript">
function openlogin(){
var sWidth=window.screen.width;
var sHeight=window.screen.height;
var BG = document.createElement("div");
BG.id = "BG";
BG.style.height=sHeight + "px";
BG.style.width=sWidth + "px";
document.body.appendChild(BG);
var login = document.createElement("div");
login.id="login";
login.innerHTML = "<span class=‘close‘ id=‘CLOSE‘>close</span>";
document.body.appendChild(login);
var close = document.getElementById("CLOSE");
close.onclick = BG.onclick = function(){
document.body.removeChild(BG);
document.body.removeChild(login);
};
};
window.onload = function(){
var btn = document.getElementById("BTN");
btn.onclick=function(){
openlogin();
return false;
}
}
</script>
至此，弹出登陆框的效果基本实现。
以上是关于HTML+CSS+JS实现点击超链接弹出文本框效果的主要内容，如果未能解决你的问题，请参考以下文章