div+javascript实现popup

最新推荐文章于 2022-11-22 17:31:30 发布
最新推荐文章于 2022-11-22 17:31:30 发布
阅读量5k 收藏
点赞数
分类专栏： JavaScript专辑 文章标签： div javascript function input button html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sutao_713/article/details/1875674
版权

<html>
<body>
<form id="form1" runat="server">
<div style="border:solid 1px black; width:400px;padding:100px; ">
<br />
<input type="text" id="text1" /><br />
<input  type= "button" id="btnShow" value="显示" οnclick="showPopup('text1',20)"/>
<input type="button" id="btnClose" value="隐藏" οnclick="removeDiv()"/>
    &nbsp;
</div>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
// JScript 文件

/
///DIV实现popup
/


///显示popup
///controlID表示要在它上面创建popup的ID
///height表示你所要创建的高度
function showPopup(controlID,height)
{

    var objControl = document.getElementById(controlID);
    var width = objControl.offsetWidth; //定义创建DIV的宽度
    //var top = calculateOffset(objControl, "offsetTop")-height-1;
    //var left = calculateOffset(objControl, "offsetLeft");//
    var r = getAbsolutePos(objControl);
    var top = r.y-height;
    var left = r.x;
//  var widthGap = objControl.parentNode.offsetWidth - objControl.parentNode.clientWidth;
//  var heightGap = objControl.parentNode.offsetHeight - objControl.parentNode.clientHeight;
    var objDiv = createDiv(top, left, width, height);
    objDiv.innerHTML="perfect life!";
    objControl.parentNode.appendChild(objDiv);
 
}

//计算字段的相对于html的偏移量(offsetTop和offsetLeft)
// function calculateOffset(field, attr)
// {
//  var offset = 0;
//  while (field)
//  {   
//      offset += field[attr];
//      //alert(field.nodeName);
//      field = field.offsetParent;
//      
//       
//  }
//  return offset;
// }
//创建一个DIV对象
function createDiv(top,left,width,height)
{
    var str = "<div id='divPopup' style='position:absolute;background-color:lightyellow'></div>";

    var objDiv = document.createElement(str);
    //设置DIV的位置、大小和边框
    objDiv.style.border = "black 1px solid";
    objDiv.style.height = height;
    objDiv.style.width = width;
    objDiv.style.top = top;
    objDiv.style.left = left;
   
    //alert(div1.outerHTML);
    return objDiv;
}
//移除DIV
function removeDiv()
{
    //document.forms[0].firstChild.removeChild(document.getElementById('divPopup'));
    var divPoppup = document.getElementById("divPopup");
    if (divPoppup)
    {
        divPoppup.parentNode.removeChild(divPoppup);
    }
    //document.getElementById('divPopup').parentNode.removeChild(document.getElementById('divPopup'));
}
//获取元素的绝对位置
function getAbsolutePos(el)
{
 var SL = 0, ST = 0;
  var is_div = /^div$/i.test(el.tagName);
  if (is_div && el.scrollLeft)
   {SL = el.scrollLeft;
    //alert(SL);
   }
  
  if (is_div && el.scrollTop)
    ST = el.scrollTop;
  var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
  if (el.offsetParent)
  {
     var tmp = this.getAbsolutePos(el.offsetParent);
     r.x += tmp.x;
     r.y += tmp.y;
  }
  return r;
}

</script> 

sutao_713
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
web前端期末大作业 ：HTML+CSS+JavaScript+Bootstrap实现响应式网站潮酷音乐网站
HTML网页设计
08-06 674
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
html+javascript实现可拖动可提交的弹出层对话框效果
12-11
虽然在提供的代码中没有直接实现可拖动的功能，但通常可以添加额外的JavaScript代码来监听鼠标事件，实现拖动效果。例如，可以通过监听`mousedown`、`mousemove`和`mouseup`事件，计算鼠标的相对位置并更新`popDiv`...
使用div+iframe实现弹窗
古老的未来
08-14 4306
转自：使用div+iframe实现弹窗_John_ABC_新浪博客 http://blog.sina.com.cn/s/blog_8a18c33d0100v5hb.html 除了使用实际的弹出窗口，还可以使用控制一个div的display属性来模拟一个弹出窗口的操作，这里使用在Div里放一个iFrame的方式，主要考虑到可以在需要的时候加载弹出窗口的内容，减少主窗口的数据量。通
WebGL--vue+openlayers实现覆盖物＋popup
Yan9_9的博客
11-22 666
最近公司有需求，需要用到openlayers实现在地图上面绘制多边形，并且轨迹回放，实现弹出框，国内资料太少了，所以在这里放上openlayers的学习教程以及这个案例的代码。
JavaScript PopUp生成器
寒冰屋的专栏
05-30 359
目录 介绍 使用程序 弹出窗口(PopUp)如何工作 一些例子 渐隐，样式和退出键关闭 将随机图像显示为Splash 结论 下载源代码363.5 KB 自己尝试 介绍 这只是非正式的脚本展示，并非详尽无遗。请参阅上文，自己尝试一下并下载源代码和文档。 使用程序 通过调用函数创建的PopUp：PopUp(parameters)其中parameters是一个对象，其中包含个性化PopUp所需的参数： cancel：PopUp将如何消失（通过点击或类似Escape，Delete键..
【JavaScript】简单实现弹出窗口div
Lee的博客
12-08 2万+
JavaScript实现弹出窗口 思路 总体使用两个div，一个作为底层展示，一个做为弹出窗口； 两个窗口独立进行CSS设计，通过display属性进行设置现实与隐藏，此处建议使用display属性而不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，影响布局； 在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭弹窗。 一、设置两个div <html> <title>弹出窗口</t
div+iframe实现弹窗
mikyz的专栏
04-06 3037
from: http://blog.sina.com.cn/s/blog_8a18c33d0100v5hb.html   除了使用实际的弹出窗口，还可以使用控制一个div的display属性来模拟一个弹出窗口的操作，这里使用在Div里放一个iFrame的方式，主要考虑到可以在需要的时候加载弹出窗口的内容，减少主窗口的数据量。通是还要考虑的一个问题就是用户在完成一次选择后，当重复打开选择框时，如
DIV+IFrame实现页面弹出窗口
热门推荐
x_k的专栏
01-31 2万+
DIV+IFrame实现页面弹出窗口
js+div实现弹出框
qazxsw635241的博客
06-19 4028
<input type="button" name="popBox" value="弹出框" onclick="popBox()"> <div id="popLayer"></div> <div id="popBox"> <div class="close"> <a href="javascript:voi...
html中设置圆角div,Javascript 圆角div的实现代码
weixin_42607969的博客
06-15 631
现在实现圆角普遍用图片来控制，这种方法有其优点(产生的圆角平滑)。 但同时他也要求有吻合的图片，如果要动态的改变div的样式颜色则有些力不从心。还有就是用js来实现。实现后的调用代码 如下var objDiv = getRoundDiv.call(document,"solid 1px yellow","#dddddd")objDiv.Div.style.width="100px";objDiv....
PopupDiv.rar_对话框与窗口_JavaScript_
08-12
在JavaScript的世界里，"PopupDiv.rar_对话框与窗口_JavaScript_" 提供了一个关于使用JQuery实现弹出层插件的主题。对话框和窗口在Web应用中扮演着至关重要的角色，它们通常用于显示信息、获取用户输入或者进行某种...
JavaScript +div 弹出窗案例
12-20
JavaScript 和 div 结合实现弹出窗是网页交互中常见的功能，这种技术被广泛应用于提示信息、用户确认操作、表单提交等多种场景。本案例主要探讨如何利用 JavaScript 和 HTML 的 div 元素创建一个自定义的弹出窗口。 ...
div失去焦点事件实现思路
12-07
最后，我们给`div`绑定了`blur`事件，当`div`失去焦点时，会自动调用`popupDiv.hide()`，将`div`隐藏起来。 总结来说，实现`div`失去焦点事件的关键步骤包括： 1. 为`div`设置`tabIndex`属性，使得`div`可以参与...
用JavaScript生成随机验证码
苏某人的传奇世界
10-22 4108
说明:复制以下代码,即可生成效果.http://www.w3.org/1999/xhtml" >    无标题页                             function validteCode(){    var codes = new Array(4);       //用于存储随机验证码    var colors = new Array("Red","Green",
JavaScript 在客户端如何实现对表格数据的升降排序
苏某人的传奇世界
12-07 1136
    JavaScript 在客户端如何实现对表格数据的升降排序                        三国群英                                                                武将                                                    武力                   
javascript实现时间格式的控制以及容错处理
苏某人的传奇世界
09-19 971
复制以下代码即可看到效果 /*输入错误时，边框的样式*/    .error_input    {     border-color:Red;     border-style:dashed;    }                         请输入时间:    String.prototype.trim=function ()       //为String对象添加trim函数{
JavaScript实现Html元素的拖拽
苏某人的传奇世界
12-06 849
            JavaScript实现Html元素的拖拽             var diffx,diffY;      var objDiv;      function beginDrag()      {         objDiv = document.getElementById("div1");        diffX = event.clientX -objDi
<div class="popup-content"> <div class="popup-row"> <div class="popup-item">5</div> <div class="popup-item">10</div> <div class="popup-item">20</div> </div> <div class="popup-row"> <div class="popup-item">50</div> <div class="popup-item">100</div> <div class="popup-item">200</div> </div> <div> <div><van-button round type="info">确认提现</van-button></div> </div> </div>点击确认提现弹出选中的div中对应的数字并示范一下
最新发布
06-04
好的，以下是示例代码： HTML 代码： ```html <div class="popup-content"> <div class="popup-row"> <div class="popup-item" id="popup-item-1">5</div> <div class="popup-item" id="popup-item-2">10</div> <div class="popup-item" id="popup-item-3">20</div> </div> <div class="popup-row"> <div class="popup-item" id="popup-item-4">50</div> <div class="popup-item" id="popup-item-5">100</div> <div class="popup-item" id="popup-item-6">200</div> </div> <div> <div><van-button round type="info" id="confirm-button">确认提现</van-button></div> </div> </div> ``` JavaScript 代码： ```javascript // 获取确认提现按钮元素 var confirmButton = document.getElementById("confirm-button"); // 添加点击事件处理程序 confirmButton.onclick = function() { // 获取所有选项元素 var popupItems = document.getElementsByClassName("popup-item"); // 遍历选项元素 for (var i = 0; i < popupItems.length; i++) { // 判断当前选项元素是否被选中 if (popupItems[i].classList.contains("selected")) { // 提取选项元素中的数字并弹出提示框 var selectedNumber = popupItems[i].innerHTML; alert("您选中了：" + selectedNumber); break; } } } // 获取所有选项元素 var popupItems = document.getElementsByClassName("popup-item"); // 遍历选项元素 for (var i = 0; i < popupItems.length; i++) { // 添加点击事件处理程序 popupItems[i].onclick = function() { // 取消所有选中状态 for (var j = 0; j < popupItems.length; j++) { popupItems[j].classList.remove("selected"); } // 添加选中状态 this.classList.add("selected"); } } ``` 示例代码中，我们给每个选项元素添加了一个唯一的 ID，然后在确认提现按钮的点击事件中，遍历所有选项元素，找到被选中的元素，提取其中的数字，并弹出提示框。 同时，我们也给每个选项元素添加了一个点击事件处理程序，当用户点击一个选项时，我们会取消所有选中状态，然后将当前选项设为选中状态。这样，用户就可以通过点击选项来选择要提现的金额。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值