JavaScript动态实现div窗口弹出&消失功能

最新推荐文章于 2022-09-08 15:36:15 发布
最新推荐文章于 2022-09-08 15:36:15 发布
阅读量787 收藏 2
点赞数 1
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44018338/article/details/100083749
版权

先积累一个JavaScript动态实现div窗口弹出&消失功能

首先是index.jsp代码

 

<html>
<head>
<link rel="stylesheet" href="css/DivStyle.css" media="screen">
<script type="text/javascript" src="scripts/div.js"></script>
</head>
<body>
    <div id="div" class="div">
        <input type="button" value="关闭" onclick="closeDiv()">
    </div>
    <div>
        <input type="button" value="显示" onclick="showDiv()">
    </div>
</body>
</html>

 

再次是scripts/div.js的JavaScript代码

 

//窗口显示函数
function showDiv() {
    //通过doc得到div赋值给变量div
    var div = document.getElementById("div");
    //设置div的属性为block即显示
    div.style.display = "block";//有的博客上为""，在这里不起作用，原因未知
}
//窗口关闭函数
function closeDiv() {
    var div = document.getElementById("div");
    //设置div的属性为none即消失
    div.style.display = "none";
}

 

css/DivStyle.css代码

 

@CHARSET "UTF-8";
/*div初始状态是不显示的*/
.div {
    display: none;
    position: absolute;
    color: blue;
    height: 300px;
    width: 500px;
    background: #99FFFF;
}
那些年的代码
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS+CSS实现带关闭按钮DIV弹出窗口的方法
12-11
本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> [removed]     function locking(){      document.all.ly.style.display=”block”;      document.all.ly.style.width=document.body.clientWidth;      document.all.ly.style.height=document.body.cl
html让元素消失,使用css来让div进行隐藏或者消失
weixin_29492649的博客
06-03 603
1.使用透明度opacity:01 2 3 4 5 6 7 div{ width: 200px;height: 200px;}8 .div1 {background-color: #0000FF;opacity: 0;}9 .div2 {background-color:...
html css 控制控件显示与隐藏,javascript 控制 DIV等html元素的显示和隐藏
weixin_32349699的博客
06-03 757
1、编写 js函数function display(id){var traget=document.getElementById(id);if(traget.style.display=="none"){traget.style.display="";}else{traget.style.display="none";}}2.、要显示 /隐藏的 html元素加上 id属性控制这个 tr的显示 /隐...
html中的div怎么隐藏显示出来,HTML中多个DIV层如何隐藏和显示？
weixin_33737167的博客
06-03 1463
回答：div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:123style="visibility:none;"document，getElementById("typediv1")，style，visibility="hIDden";//隐藏document，getElementById("typediv1")，style，visibility="visible";/...
html动态显示隐藏div,div隐藏与显示属性 怎么让一个div显示一个div隐藏
weixin_36457551的博客
06-03 2107
怎么让一个div显示一个div隐藏 总是显示 function showhidediv(123){ var sbtit有三种方法实现，原声js两种，还有一种jquery的，其实只是写法不同。方法如下： 显示内容点击显示/*原生的js写法*/function showdiv(){if(showdiv_display = document.getElementById('show').style...
JavaScript---点击div遮罩层，关闭div
JamieCheung的专栏
05-02 3797
id="productDetailDiv"，是带遮罩的大div，id="addprodtocar"，是不带遮罩的div// 点击div框外，关闭div $('#productDetailDiv').click(function(event) { $('#productDetailDiv').hide(); }); $("#addprodtocar").click(function() { ...
html5中如何使弹出的窗口自动关闭,JS弹出div和关闭
weixin_42373066的博客
05-31 1022
//--弹出divvar parameter;var type;function alert_div(type,parameter){//获得鼠标当前X,Y坐标var x,y;if(!document.all){x=pageX;y=pageY;}else{x=document.body.scrollLeft+event.clientX; //鼠标X轴的值y=document.body.scroll...
js实现一个弹窗div
baiqi123456的博客
09-08 3896
想实现一个这样的功能，点击一个删除按钮后，在当前页面弹出一个对话框，提示确定或取消，如果点击确定，则删除成功，如果点击取消则取消删除。
html弹出div提示自动关闭,JS+CSS实现带关闭按钮的DIV弹出窗口
weixin_42116847的博客
05-31 498
Div 弹出窗口，JavaScript+CSS共同打造，可以覆盖父窗口，可以移动，自带关闭按钮，蓝色经典风格，着实不错。JS+CSS实现带关闭按钮的DIV弹出窗口丨芯晴网页特效丨CsrCode.Cnfunction locking(){document.all.ly.style.display="block";document.all.ly.style.width=document.body...
如何创建一个JavaScript弹出DIV窗口层的效果
10-26
我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果
网页弹出DIV层，带关闭按钮
10-30
基本的网页弹出div层效果，带关闭按钮。div层浮动在原网页之上。
javascript用DIV模拟弹出窗口_窗体滚动跟随
10-30
可滚动跟随弹出框效果代码,非常实用的应用于网络广告
JS+CSS实现Div弹出窗口同时背景变暗的方法
10-24
主要介绍了JS+CSS实现Div弹出窗口同时背景变暗的方法,是一款比较典型的javascript操作弹出窗口的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript div 弹出可拖动窗口
10-30
创建弹出div窗口。
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
10-22
主要介绍了JavaScript实现弹出DIV层同时页面背景渐变成半透明效果,涉及JavaScript弹出窗口的实现及页面元素属性动态变换的相关技巧,需要的朋友可以参考下
js--textarea的取值赋值
热门推荐
那些年的代码
11-13 1万+
取值赋值常用的方法，html(),text(),val() 单独说说textarea .它是表单元素，val()可用 .它是闭合标签，html(),text()可用 这三个都可以取值赋值，会有怎样的效果？举例 <textarea class="test">111</textarea> 一、取值 1. textarea默认值111 2. 在输入框内输入w...
Jquery为a标签的href赋值实现代码
那些年的代码
09-07 7833
Jquery为a标签的href赋值实现思路如下：先获取选中项的值在使用attr属性为href赋值,有类似需求的朋友可以参考下哈，希望可以帮助到你 <script type="text/javascript"> function doTest(){ var value = $("input[name='dizhi'][type='radio']:checked").val();//...
js删除元素对象或其内容（div、ulli、img、input等）
那些年的代码
09-09 7416
　　在Web前端设计过程中，用js删除元素对象经常会用到。例如某一个页面在加载完成时显示一条新闻，这条新闻只显示一次且仅显示一小段时间，则显示完后就需要把它删除或隐藏。 　　在 javascript 中，删除元素其实是移除元素，用 removeChild() 方法，元素不能自己删除自己，所以只能用其父元素将其删除，所以用移除孩子的方法。无论用js删除页面级元素div，还是删除列表级元素 ulli...
jsp页面弹出另一个页面窗口
那些年的代码
08-27 4550
index.jsp部分代码： <script type="text/javascript"> function show(obj){ alert("谢谢！"); // document.getElementById("d").innerHTML = "显示需要组装的信息"; // window.open ("page.html...
jquery实现div弹出效果
最新发布
07-08
使用jQuery实现DIV弹出效果可以通过以下步骤进行： 1. HTML结构：首先，在HTML中创建一个DIV元素，用于弹出内容的容器。例如： ```html <div id="popup" style="display: none;"> <h2>弹出内容</h2> <p>这是一个弹出窗口的内容。</p> <button id="closeBtn">关闭</button> </div> ``` 2. CSS样式：为弹出容器DIV添加样式，使其以弹出的形式显示在页面上。例如： ```css #popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: #fff; border: 1px solid #ccc; padding: 20px; z-index: 9999; } ``` 3. jQuery代码：使用jQuery来实现弹出效果。例如： ```javascript $(document).ready(function() { // 点击触发弹出 $("#openBtn").click(function() { $("#popup").fadeIn(); }); // 点击关闭按钮或弹出外部区域时关闭弹出 $("#closeBtn, #popup").click(function() { $("#popup").fadeOut(); }); // 阻止点击弹出内容区域时冒泡关闭 $("#popup").click(function(event) { event.stopPropagation(); }); }); ``` 在上述代码中，首先使用`$("#openBtn")`来选择一个按钮元素，当点击该按钮时，使用`fadeIn()`方法来使弹出容器淡入显示。使用`$("#closeBtn, #popup")`来选择关闭按钮和弹出容器本身，当点击它们时，使用`fadeOut()`方法来使弹出容器淡出隐藏。 同时，还添加了一个事件处理程序来阻止点击弹出内容区域时冒泡关闭，以确保在弹出内容区域内的点击操作不会关闭弹出容器。 通过以上步骤，你可以使用jQuery实现一个简单的DIV弹出效果。记得在页面中引入jQuery库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

那些年的代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值