前端实例练习——模态框

时间：2023-04-02 22:45:17 HTML

模态框代码存放在Github效果预览初衷：很多人刚接触前端都会问，“前端如何入门？”，我对目前网上的“入门级”教材不是很满意。在学习一门新知识时，例子尤为重要。这里我整理一下当前页面常用功能实现的具体例子。希望能为您提供一些帮助。希望与大家分享，共同进步。效果预览HTML部分模态框

head

这是模态框！

喜欢就点个赞吧！

Tail

CSS部分模态框样式/*模态框*/.模态{显示：无；/*默认隐藏*/position:fixed;/*根据浏览器定位*/z-index:1;/*置于顶部*/left:0;顶部：0；宽度：100%；/*全宽*/高度：100%；/*全高*/overflow:auto;/*允许滚动*/background-color:rgba(0,0,0,0.4);/*背景色*/}模态框内容样式/*模态框内容*/.modal-content{显示：flex;/*使用flexbox布局*/flex-direction:column;/*垂直排列*/position:relative;背景色：#fefefe；保证金：15%自动；/*从顶部15%水平居中*/padding:20px;边框：1px实心#888；宽度：80%；动画：topDown0.4s；/*自定义动画，从上到下出现模态框内容*/}@keyframestopDown{from{top:-300px;不透明度：0}到{顶部：0;opacity:1}}/*Modalhead*/.modal-header{display:flex;/*采用flexbox布局*/flex-direction:row;/*水平布局*/align-items:center;/*内容垂直居中*/justify-content:space-between;}/*closeX样式*/.close{color:#aaa;浮动：对；字体大小：28px；font-weight:bold;}.close:hover{color:black;文字修饰：无；cursor:pointer;}延伸阅读：CSS3动画属性JavaScriptcontentisolationglobal(function(){})();将JS代码放在一个单独的自调用匿名函数中延伸阅读：深入理解(function(){})();创建模态框对象/*创建模态框对象*/varmodalBox={};/*获取模态框*/modalBox.modal=document.getElementById("myModal");/*获取触发按钮*/modalBox.triggerBtn=document.getElementById("triggerBtn");/*获取关闭按钮*/modalBox.closeBtn=document.getElementById("closeBtn");/*modal框显示*/modalBox.show=function(){console.log(this.modal);this.modal.style.display="方块";}/*模态框关闭*/modalBox.close=function(){this.modal.style.display="none";}/*当用户点击模态框内容外时，模态框也会关闭*/modalBox.outsideClick=function(){varmodal=this.modal;window.onclick=function(event){if(event.target==modal){modal.style.display="none";}}}/*模态框初始化*/modalBox.init=function(){varthat=this;this.triggerBtn.onclick=function(){that.show();}this.closeBtn.onclick=function(){that.close();}this.outsideClick();调用模态框modalBox.init();好了，现在我们写完了how，是不是很简单。赶紧打开浏览器看看吧！在这里，只是给大家提供一个思路，参考。具体实现，每个人可以有不同的方法。请快快发挥你的想象力，把你最想在电脑上实现的功能打出来吧！来自w3cschools的参考

上一篇：前端面试日常3+1——Day407

下一篇：画电路图用什么软件

前端实例练习——模态框相关文章