js实现弹框效果

本文实例为大家分享了js实现弹框效果的具体代码,供大家参考,具体内容如下

js实现弹窗效果

利用display来控制弹窗的现实和隐藏

<!-- 弹出层 -->
<div id="popLayer"></div>  <!--黑色蒙版 -->
<div id="popBox">
   <div class="close">
      X
   </div>
   <div>
     <!-- 内容 -->
  </div>
</div>

js:

//点击关闭按钮
var close = document.querySelector(".close")
close.onclick = function () {
  console.log("点击")
  var popBox = document.getElementById("popBox");
  var popLayer = document.getElementById("popLayer");
  popBox.style.display = "none";
  popLayer.style.display = "none";
}

//需要显示时调用
var popLayer = document.getElementById("popLayer");
popBox.style.display = "block";
popLayer.style.display = "block";

CSS:

/* 弹出层 */
#popLayer {
  display: none;
  background-color: #000;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  opacity: 0.6;
}

/*弹出层*/
#popBox {
  display: none;
  background-color: #FFFFFF;
  z-index: 11;
  width: 220px;
  height: 300px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/*关闭按钮*/
#popBox .close {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  line-height: 20px;
  right: 8px;
  top: 8px;
  z-index: 50;
}

#popBox .close a {
  text-decoration: none;
  color: #2D2C3B;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-03-18

vue.js中toast用法及使用toast弹框的实例代码

1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

Bootstrap和Angularjs配合自制弹框的实例代码

指令 directive('bsPopup', function ($parse) { return { require: 'ngModel', restrict: 'A', link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem

轻松实现js弹框显示选项

先看看效果: 效果 -点击弹出弹框 -点击复选框,已选div中 显示已选中的选项 -再次点击取消选中状态,已选div中 显示的选中选项取消显示 -点击 已选 div中的 选项x图标,取消显示该选项 ,取消相应复选框选中状态​ -点击大类,小类取消选中状态,点击小类,选中大类取消选中状态 -最多3个选项可以被选中 -点击x图标关闭弹框 -点击确定按钮显示选择后的结果 代码块 html片段代码 <div class="one_search clearfix"> <labe

js+html5实现半透明遮罩层弹框效果

点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧 1.遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧 是哪里错了呢?你的css是这样写的吧: 应该这样: 需要注意的是这几个参数的意思:RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一个参数 0.5 是指的透明度 1表示不透明 2.半遮罩层里面的内容可以上下滑动 感觉挺好玩的 /笑哭 修改就是把半遮罩层的position设置为fixed 里面的内容就不会变啦 接下来就是代码show <!docty

struts json 类型异常返回到js弹框问题解决办法

struts json 类型异常返回到js弹框问题解决办法 当struts 框架配置了异常时 例如: <package name="sysCnn" namespace="/" extends="json-default"> <global-results> <result name="error">/WEB-INF/pages/error.jsp</result> <res

javascript实现无法关闭的弹框

大家都见过某网页中的恶意广告,你关闭了又出来了!为何,JS来告诉你 HTML <body> <h3 class="whiteColor">无法关闭的弹框,打不死的小强!</h3> <div id="middleBox"> <a href="javascript:;" class="close_btn" id="closeBtn"><img s

js实现上下左右弹框划出效果

效果图: 图(1)初始图 图(2)点击"从右侧划出" 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,

基于layer.js实现收货地址弹框选择然后返回相应的地址信息

先给大家展示下效果图: 核心代码如下所示: ('.selectaddress').click(function () {//图一联系方式中的点击事件 top.layer.open({ id: "layer_say_hello", type: 2, title: '请点击选择联系地址', shadeClose: true, shade: 0.8, area: ['300px', '400px'], content: "{:Url('/mobile/user/address_li

js自定义弹框插件的封装

弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高. 首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层

vue.js实现只弹一次弹框

核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中. <template> <div v-if="isShow"> <!--最外层背景--> <div class="popup_container"> <!--居中的容器--> <img @click="noPopup" src="delete.png" alt="&q

Vue.js页面中有多个input搜索框如何实现防抖操作

debounce简介 debounce是lodash工具库中的一个非常好用的函数.在实现搜索框对输入进行动态查询的时候,我们需要防止前端频繁的发送查询请求给后端,这个时候就需要用到debounce,它可以设置一个时间间隔,比如300ms,忽略300毫秒内的输入变化.debounce的详细介绍可以参考 这篇 文章. debounce的高级用法 博主的页面中有3个搜索框,每个搜索框都需要动态响应用户的输入到后台去查询匹配的文章,如下图: 在Vue.js中如何实现多搜索框的debounce绑定,下面博

基于Vue.js+Nuxt开发自定义弹出层组件

今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

Vue.js弹出模态框组件开发的示例代码

前言 在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求.这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了.目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能.这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式.这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发

Vue组件化开发之通用型弹出框的实现

本文主要分享关于组件化开发的理解,让刚入门的小伙伴少走一些弯路,提高开发效率,作者本人也是新手,如有不当之处,请大佬指出,感谢. 相信很多刚入门的小伙伴,经常会写很多重复的代码,而这些代码一般情况下也都是大同小异,在这种情况下,如何让开发和学习变得更加高效,组件化的思想就显得尤为重要.这里通过设计一个简单的弹出框,给小伙伴们分享组件化的应用. 组件&组件化 组件化是对某些可以进行复用的功能进行封装的标准化工作.组件一般会内含自身的内部UI元素.样式和JS逻辑代码,它可以很方便的在应用的任何地方进

JS实时弹出新消息提示框并有提示音响起的实现代码

在java web认证系统开发中,客户要求有数据更新时要在页面弹出提示框,这样方便在旁边的工作人员可以及时的知道有新数据提交了,我们除了使用及时的推送技术外还可以使用ajax来实现这些功能. 代码实现的原理,在页面启用定时执行ajax请求,如果获得数据是最新状态的,要执行语音提示和弹出框提示,这样实现的弊端是频繁的调用数据库,该方法只适合于使用人数较少的系统. 1.加入语音提示 <audio id="sound" autoplay="autoplay">

JS实现刷新父页面不弹出提示框的方法

本文实例讲述了JS实现刷新父页面不弹出提示框的方法.分享给大家供大家参考,具体如下: A页面 open方式出 B页面 ,当B页面做了类如保存动作后,需要关闭B页面,刷新A页面的情况下,会弹出一个提示框,要求点重试,这个就是发生预料之外的情况,用户体验很差. 解决方案分两种情况: 1.A页面很简单的情况(没有frame/iframe) 在B页面中的function中: function close(){ window.opener.location.reload(); window.opener

JS点击图片弹出文件选择框并覆盖原图功能的实现代码

简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能. js代码: <script type="text/javascript" src=

JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">