JavaScript模态框实现

模态框在网页中很常见就是在当前页面中弹出一个框供与客户交互。

类似于这样。

首先我们要明白该框工作原理至于怎样与后端进行交互联系这边先不做介绍我们首先是单纯的了解怎样在网页中实现这样的一个框图的显现。值得注意的是框图产生时一般的我们滚动鼠标发现网页仍在移动。实现这样框图就是加了两个盒子

第一个盒子实现背景：

将整个页面覆盖（透明色）

第二个盒子实现交互框。

小编这边来实现一个最简单的交互框（代码量可能相对多了一点，主要是因为样式多了一点整体结构还是非常简单的）

代码如下：

模拟框最关键的一步就是在对他们样式写好时最先以display:none;让他们不显示，然后以js触动改变display再讲他们显现出来。

<title>点击显示弹框</title><style type="text/css">*{margin: 0;padding: 0;}#btn{text-align: center;}.a1{display: block;text-decoration: none;  //创建一个超链接点击可现实弹框}#back{width: 100%;height: 100%;background: rgba(0,0,0,.5);   //设置黑色的透明色position: fixed;              //在页面中绝对定位top: 0;left: 0;z-index: 999;                //因为要覆盖全网页所以设置一个比较高的权重display: none;}#login{display: none;width: 400px;height: 250px;background-color: #fff;position: fixed;top:50%;left:50%;margin:-125px 0 0 -200px;z-index: 1000;}  //弹框用样也是像背景一样实现#close_all{position: absolute;top:10px;right:10px;width:15px;height:15px;font-size:15px;cursor: pointer;  //该步鼠标悬停时变小手} //给×符号定位在右上角</style><script type="text/javascript">window.onload=function () {var btn=document.getElementById("btn");var back=document.getElementById("back");var login=document.getElementById("login");var close_all=document.getElementById("close_all");btn.onclick=function () {back.style.display="block";login.style.display="block";}close_all.onclick=function () {back.style.display="none";login.style.display="none";}}</script>
</head>
<body>
<div id="btn"><a href="javascript:;" class="a1">点击我登录</a>
</div>
<div id="back"></div>
<div id="login"><span id="close_all">×</span>
</div></body>

JavaScript模态框实现相关推荐

Sahi 使用技巧4-iframe、下载文件、模态框、访问不了网页的处理
这里总结了几个Sahi使用中可能经常遇到的问题 frame.iframe的处理在selenium里面,跨frame或者iframe是需要用switchto这样的方法进入frame或者iframe,才 ...
通过javascript实现的轻量级模态框解决方案（支持Ajax）
实现模态框的解决方案在互联网上能找到不少,但是它们大多需要引入诸如Jquery.Mootools.Dojo.YUI等javascript库.如果仅仅是要实现模态框就引入庞大的类库,岂不是得不偿失.这里 ...
html模态框插件,如何使用JavaScript构建模态框插件
作为一位Web开发人员而言,模态框(Modal)并不会陌生.就我个人而言,我更为熟悉的是怎么通过CSS来编写一个模态框以及怎么通过CSS给模态框添加一些动效.正好最近工作中也和Modal框杠上了.另外 ...
4 前端溢出定位模态框透明度 JavaScript简介
前端 1 溢出属性overflow 标签内部的内容超出了标签自身的范围会造成内容的溢出. overflow属性规定当内部内容溢出元素框时发生的事情. overflow: visible (默认值)内容 ...
HTML+CSS+JavaScript实现模态框（可拖拽）
前言模态框是指覆盖在父窗口上的子窗口,但在HTML网页中,并没有父窗口和子窗口的概念.这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果. 效果演示: 下面开始详细介绍如何实现一个可拖拽的 ...
html拖拽模态框,可拖拽的谷歌样式纯javascript模态窗口插件
draggable-google-modal是一款可拖拽的谷歌样式纯javascript模态窗口插件.该模态窗口插件使用纯js编写,模态窗口可以任意进行拖动,并且模态窗口可以全屏放大,或左右对齐占据半 ...
SpringBoot+Thymeleaf+Jquery实现模态框的显示与数据填充
场景实现 Html代码 <div th:fragment="content"><div class="ibox float-e-margins&quo ...
BootStrap学习(6)_模态框
一.模态框模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果只使用该功能,只引入BootSt ...
Bootstrap4+MySQL前后端综合实训-Day03-AM【折叠、模态框】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录折叠菜鸟教程--Bootstrap--折叠模态框菜鸟教程--Bootstrap- ...
Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...

JavaScript模态框实现

JavaScript模态框实现相关推荐

最新文章

热门文章