做过web项目的朋友，大家都知道，有时候点击某一个按钮或者a标签时，需要弹出一个编辑框。在编辑框弹出来的时候， 页面其它地方是不允许点击的，直到这个编辑框关闭。
那么我们如何做出这样一个效果呢？
其实也不难。
首先需要有一个编辑框对应的div，默认为隐藏状态，点击“编辑”时，设置为显示状态；点击编辑框上的关闭按钮时，又隐藏掉。此编辑框需要设置为绝对定位(position: absolute)，以便显示在屏幕的固定位置。
其次需要一个遮罩层，为全屏幕的，半透明状态。编辑框弹出时，显示遮罩层；编辑框消失时，隐藏遮罩层。
直接上代码吧
-
html代码
<body> <div id="edit_mask" class="none"></div> <!--遮罩层--> <div> <input type="text" id="keyword"> <a id="edit" href="javascript:void(0)">编辑</a> </div> <!--弹出编辑框--> <div class="none edit_popup"> <div class="title" > <a href="javascript:void(0)" class="btn_close">X</a> </div> </div> <script type="text/javascript" src="{% static 'js/test/test.js' %}"></script> </body> -
css代码
.none { display: none; } .edit_popup { z-index: 100; position: fixed; top: 100px; left: 100px; width: 300px; height: 300px; background-color: #2aabd2; } .edit_popup .title { height: 40px; position: relative; } .edit_popup .btn_close { position: absolute; right: 10px; top: 10px; } #edit_mask { position: fixed; top: 0; right:0; bottom:0; left:0; width:100%; height:100%; opacity: 0.4; background:rgb(0, 0, 0); z-index: 50; } a { text-decoration: none; } -
js代码
function bindEvents() { $('#edit').on('click', edit); $('.btn_close').on('click', close_edit); } function edit() { var left = ($(document).width() - parseInt($('.edit_popup').css('width'))) / 2; $('.edit_popup').css('left', left + 'px'); $('.edit_popup').removeClass('none'); $('#edit_mask').removeClass('none'); } function close_edit() { $('.edit_popup').addClass('none'); $('#edit_mask').addClass('none'); }这样一个简易的弹出框就做好了。这里大家可以看一下布局里的相对定位、绝对定位、自动算出编辑框的left值(根据div宽度和document的宽度计算)。
相关推荐
这通常包括一个背景遮罩层和一个可自定义内容的对话框容器。对话框可能包含标题、内容区域、按钮等元素。CSS用于设置样式，确保对话框居中、具有合适的大小和透明度，以及合适的z-index值以确保其位于其他元素之上。...
1. 首先对窗口的大小进行限制，确保它不会小于设定的最小值，同时，如果设置为模态对话框，则会根据页面大小创建一个背景层（mask）作为遮罩，防止用户与页面其他部分交互。 ```javascript if (width ) width = 300...
4. 动态加载：如果弹出层的内容是JSP页面，那么需要使用Ajax技术异步请求服务器，获取JSP页面生成的HTML内容，并将其插入到弹出层的HTML结构中。这涉及到XMLHttpRequest对象或者jQuery的$.ajax()方法。 5. 模态...
在JavaScript的世界里，"js划词弹出模态div特效"是一种常见的用户交互设计，它提高了网站的用户体验和互动性。这种技术的核心在于利用JavaScript监听用户的鼠标动作，当用户在网页上选择（划词）文本时，会触发一个...
本项目涉及的核心知识点是使用jQuery实现点击按钮后无限弹出遮罩层的效果，同时还具备拖动功能，这对于创建对话框、模态窗口或者加载提示等应用场景十分实用。 首先，我们从`index.html`文件开始。这个文件是网页的...
EXT的弹出窗口组件允许开发者创建可自定义、功能齐全的模态或非模态对话框，具有拖放功能，能够轻松调整大小，以及与其他EXT组件集成的能力。 在JavaScript中实现弹出窗口，通常涉及以下知识点： 1. DOM操作：...
- 函数`$.fn.showWarningDialog()`和`$.fn.hideWarningDialog()`分别用于显示和隐藏遮罩层及关联的弹出窗。在显示遮罩层的同时，会根据传入参数显示或设置弹出窗的内容和行为。 - 在`$.fn.hideWarningDialog()`中...
弹出层可以用于模态对话框、信息提示、表单填写等多种场景。JS中的弹出层实现主要依赖DOM操作、CSS样式控制以及事件监听等技术。 1. **DOM操作**：创建弹出层的HTML结构通常需要动态生成，因为它们可能在页面加载时...
这个“jQuery插件 仿facebook样式的模态框.zip”文件，正如其名，提供了创建类似Facebook弹出式对话框（也称为模态框）的功能。这种插件在网页设计中特别有用，因为它可以优雅地展示重要的信息或用户交互，而不会...
在网页设计中，弹出层（也称为模态窗口或对话框）是一种常见的交互元素，用于显示临时信息、用户确认、表单输入等。腾讯作为中国互联网巨头，其产品界面设计一直以美观、易用著称，弹出层效果也不例外。本教程将详细...
4. **显示与隐藏**：当需要弹出对话框时，可以将遮罩层的`display`属性设置为`block`，关闭时则设置为`none`。同时，可以配合JavaScript事件监听，如`click`、`keydown`等，实现对遮罩层的交互控制。 5. **优化与...
5. **弹出层/模态对话框**：如果选择框以弹出层的形式出现，可能需要实现一个简单的模态对话框。这可能涉及到CSS样式调整，如添加遮罩层和定位弹出层。 6. **事件冒泡与阻止默认行为**：在用户做出选择后，可能需要...
源码中实现了遮罩层的生成和移除，以及事件监听来处理用户的操作。 4. **自定义内容（Custom Content）**：允许开发者插入任意HTML内容到弹出层中，提供了高度的可定制性。源码中包含了动态创建和销毁DOM元素的逻辑...
1. **多类型弹出**：PopupDiv 可能支持多种弹出层类型，如信息提示、警告、错误、确认对话框，以及自定义内容的模态框。 2. **动态配置**：通过配置选项，开发者可以定制弹出层的样式、位置、透明度、动画效果等，...
- 遮罩层的生成和控制：处理灰色背景的显示和隐藏，确保其在需要时出现并随模态窗口移动。 - 样式和动画：定义模态窗口的CSS样式，以及可能的动画效果，如淡入淡出。 - 事件处理：绑定和触发与模态窗口相关的事件，...
网页遮罩通常用于在页面上创建一个半透明的覆盖层，以突出显示特定区域或阻止用户与背景内容交互，比如在加载新内容或弹出对话框时。 首先，我们要理解“单例模式”在JavaScript中的应用。单例模式是一种设计模式，...
8. **关闭弹出层**：在用户点击关闭按钮或点击遮罩层时，调用SimpleModal的`$.modal.close()`方法关闭相册。 9. **优化用户体验**：可以添加过渡效果，如淡入淡出，提高视觉效果。同时，考虑对不同屏幕尺寸的响应式...
模态框通常包括自定义内容、关闭按钮以及背景半透明遮罩层，比如Bootstrap的 Modal 组件。此外，一些第三方库如Bootbox.js、SweetAlert2提供了更多样式和配置选项。 4. 各种特效：JavaScript可以实现各种视觉效果，...
- **模态对话框**：点击某个元素后，弹出一个遮罩层，显示详细信息或确认提示。 - **拖放功能**：允许用户通过鼠标拖拽元素在页面上移动，常用于文件上传或布局调整。 - **响应式设计**：根据屏幕尺寸改变网页布局，...
4. 遮罩层：模态框通常带有一个半透明遮罩层，用于减少页面其他内容的干扰，并提供一种视觉上的层级感。 5. 定时器功能：在某些场景下，可能需要模态框自动弹出和关闭。 我们使用vue-cli 3.0来搭建Vue项目的基础...