js编写弹出模态框

最新推荐文章于 2024-08-21 09:17:03 发布
小花环 最新推荐文章于 2024-08-21 09:17:03 发布
阅读量1.9k 收藏 6
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/m0_74460131/article/details/127811098
版权
这篇博客详细介绍了如何通过JavaScript在网页中动态创建和关闭模态框。首先，在body中添加按钮元素，然后通过querySelector获取该按钮。接着，创建模态框所需的三个div，并赋予相应样式。点击按钮后，模态框显示，点击模态框内的取消按钮则移除模态框。为了避免多次点击按钮导致模态框重复生成，需要添加一个判断来检查模态框是否已存在。这是一个基础的前端交互实现，适合初学者学习。
摘要由CSDN通过智能技术生成

执行后的结果：

点击按钮出现模态框，点击x按钮模态框消失

 

 初始打开就会有一个按钮在我们的静态页面，那我们是不是应该在body里面写一个button

 点击button出现模态框

1、我们先要获取button，获取button的方式有很多种，就选一种比较简单的let but =document.querySelector("button")；来保存一下

2、分析这个模态框，需要创建三个div，给他们增加样式。点击button后出现模态框（模态框总体样式和点击按钮代码）

 

 

 

 3、关闭模态框，点击x(cancelBut)就把模态框remove掉（cancel样式和点击cancel代码）

 

 

 4、这样就完成了弹出模态框和关闭模态框，但是有一个bug，如果我们没有关闭模态框继续点击按钮，他就会一直产生模态框，那我们就要给他设置一个判断是否已经出现模态框，怎么判断呢？

 

 

 

小花环
关注 关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html+js 弹出对话框(模态框)
weixin_42455970的博客
07-07 680
<div id="modalBox"> <dialog> <button id="close">&Chi;</button> <!-- x -> <form method="post" action="result.html"><!--（表示向何处发送表单数据） --> <p> 名字：<input name="name" ty...
js弹出模态窗口
08-28
别人写的，感觉比较好用，没找到下载，是从人家网页里扣出来的，小小整理一下。
Bootstrap 模态框（Modal）插件
最新发布
lwx666sl的博客
08-21 747
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
使用javascript打开模态对话框
weixin_33995481的博客
05-27 136
1. 标准的方法 &lt;script type="text/javascript"&gt;   function openWin(src, width, height, showScroll){   window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+...
js实现在页面中点击一个按钮弹出模态框
han_han__的博客
09-08 4080
js实现在页面中点击一个按钮弹出模态框
用JS实现加载页面前弹出模态框
2号自信的博客
10-20 9972
原文链接：点击打开链接 普通管理员-出库登记 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
javascript弹出模态窗体
哈特中尉
01-27 177
function openwindow(url,name,iWidth,iHeight){ //获得窗口的垂直位置 var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的水平位置 var iLeft = (window.screen.availWidth-10-iWidth)...
js编写弹出模态框 (Modal)
05-16
以下是一个简单的例子，演示如何使用 JavaScript 创建一个弹出模态框： ```html <!DOCTYPE html> <title>Modal Example .modal { display: none; position: fixed; z-index: 1; left: 0; top...
AngularJs 弹出模态框（model）
10-22
在AngularJs中，弹出模态框（modal）是一种常见的用户交互方式，它允许开发者在不离开当前页面的情况下，向用户显示额外的信息或者获取用户输入。 AngularJs提供了实现模态框功能的服务，例如$modal。$modal服务是...
MyFourtythLearning:带有HTML，CSS和JavaScript的弹出模态框
03-18
本教程“我的第四课：带有HTML，CSS和JavaScript的弹出模态框”旨在教你如何利用这三种核心技术构建一个功能完备的弹出模态窗口。模态框是网页设计中一种常见的元素，它可以在用户点击某个按钮或链接时在当前页面上...
支持弹出图片文字和表单模态框代码
06-24
在网页设计和开发中，"支持弹出图片文字和表单模态框代码"是一种常见的交互功能，用于增强用户体验和网站的互动性。模态框（Modal Box）是一种设计模式，它强制用户与当前出现的窗口进行交互，直到关闭该窗口后才能...
javascript 弹出模态对话框
04-20
javascript 弹出模态对话框，自定义各项功能，此部分只是个人收藏，供大家参考
js做的模态框,很不错
02-03
用JS做的模态框，背景页面在下，提示框在前,效果不错,值得拥有.
js实现简单模态框实例
10-17
主要为大家详细介绍了js实现简单模态框实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js模态框
weixin_45307185的博客
09-18 216
1. 基本语法 ---- window对象有一个方法称为showModalDialog ，我们可以在页面按钮的onclick中写如下代码： < BUTTON onclick="window.showModalDialog ('dialog.htm')" >Search< /BUTTON > ---- 系统会在新窗口中打开dialog.htm页面，并且等待用户响应，如...
JS模态框
qq_59494319的博客
07-16 1057
JS模态框
JavaScript
m0_59359854的博客
07-04 2119
拖拽原理1：mousedown 鼠标按压获取鼠标在登录框的宽度。2：mousemove 鼠标移动的时获取最新的pageX减去鼠标在登录框的X距离，就是模态框的left与top值。3：mouseup 鼠标松开时，移除mousemove 事件 client概述通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。clientTop ：元素上边框大小clientLeft ：元素左边框大小clientWidth：包括padding，不包括边框。clientHeight：包括paddin
纯js模态框
baidu_35881402的博客
11-12 753
/** * @class Model * @author 吹懜到汐州 * @description Model Frame * @param options:Object => [title:string, content:string, confirm:string, cancel:string, showModel:boolean, showMask:boolean, * showConfirm:boolean, showCancel:boolean, isDrag:b...
js简单模态框
m0_57661429的博客
10-10 785
如图先完成一个按钮，在点击按钮时出现模态框 <!-- 模态框触发按钮 --> <div class="btn"> <button id="open">click me</button> </div> .btn button { background-color: dodgerblue; border: 0 solid dodgerblue; border-radius: 10%; margi
写文章

热门文章

  • js编写弹出模态框 1943

最新评论

  • js编写弹出模态框

    CSDN-Ada助手: 前端构建工具Vite的优点是什么呢？

最新文章

2022年1篇

目录

目录

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值

深圳SEO优化公司网站优化工具越秀网站优化推广排名美妆网站SEO优化东莞南城网站优化东营广饶网站推广优化网站怎么做关键词优化论坛优化网站余杭区网站优化推荐哪里网站优化公司选择兴田德润于洪区推广网站建设优化价格海兴网站优化报价大连比较好的网站推广优化黄浦区谷歌网站优化排名青岛网站优化维护优化网站软件该怎么利用羊口网站优化流程网站论坛优化溧阳网站关键词优化排名家居网站优化推广益阳网站搜索排名优化学习seo优化网站宁波鄞州区好品质百度网站优化网站关键词优化教程余姚网站优化哪家好阿克苏网站怎么优化莘县网站优化网站有百度权重1优化好做吗广西网站建设优化淮安网站建设关键词优化智能网站优化价格歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅：唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人？开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化