js实现简单模态框实例

这里是基于 Markdown 编写的攻略,以下将详细讲述如何使用 JavaScript 实现简单模态框。

简述

模态框(Modal)是一种弹出框的交互方式,即在页面的中心或者某个指定区域以弹窗的形式展示内容,遮罩层和窗口通常会阻止用户进行其他操作,只有完成当前操作或者关闭模态框后才能继续页面内的其他操作。

使用步骤

参考以下的实现步骤:

1.创建基本结构

我们首先先创建模态框的基本结构,如下所示:

<div class="modal-wrapper" id="modal-wrapper">
  <div class="modal">
    <!-- 模态框内容区域-->
  </div>
</div>

2. 添加样式

为了让模态框在页面中正确展示,我们还需要添加一些样式代码:

.modal-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal {
    width: 400px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 20px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 20px;
}

上述的样式代码,定义了模态框的容器和内容区域的样式。

3.编写 JavaScript 代码

接下来,我们需要编写 JavaScript 代码来实现打开和关闭模态框。

const modalWrapper = document.getElementById("modal-wrapper"); // 获取模态框的父容器
const modal = document.querySelector(".modal"); // 获取模态框本身
const openButton = document.getElementById("open-modal"); // 获取打开模态框的按钮
const closeButton = document.querySelector(".close-button"); // 获取关闭模态框的按钮

// 点击打开模态框的按钮
openButton.addEventListener("click", () => {
  modalWrapper.style.display = "flex";
});

// 点击关闭模态框的按钮
closeButton.addEventListener("click", () => {
  modalWrapper.style.display = "none";
});

// 点击模态框的外部遮罩层或者按下"Esc"键
window.addEventListener("click", (event) => {
  if (event.target === modalWrapper || event.keyCode === 27) {
    modalWrapper.style.display = "none";
  }
});

上述代码分别获取了模态框的父容器、模态框本身、打开和关闭按钮,并为这些元素添加了点击事件。当用户点击打开按钮时,模态框将会以 flex 布局方式“展开”并显示在页面上,同时将背景设置为半透明;当用户单击关闭按钮或者单击模态框背景的其他区域时,模态框将会以隐藏的状态关闭。

示例说明

下面是两个基于上述代码实现的模态框实例:

示例一:基础样式

Codepen 示例

这是一个基础的模态框实例,点击“打开模态框”按钮即可打开模态框。在模态框中,用户可以输入姓名和邮箱,并且点击“确认”按钮后弹出消息框。当用户完成操作或者单击关闭按钮时,模态框将关闭。

示例二:带有复杂表单

CodePen 示例

这是一个带有复杂表单的模态框实例,用户可以填写姓名、邮箱和密码,并且可以选择用户角色和感兴趣的领域。当用户发送表单时,模态框将关闭。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现简单模态框实例 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript中的事件循环机制及其运行原理

    JavaScript中的事件循环机制及其运行原理 JavaScript是一种单线程语言,这意味着一次只能执行一个任务。但是,JavaScript中有许多异步操作(例如网络请求、定时器等)需要在后台执行而不会阻塞代码运行,这就是事件循环机制的作用。 事件循环机制的基本概念 事件循环是JavaScript的一个重要特性,它基于一个简单的原理:执行栈为空时,Jav…

    JavaScript 2023年6月11日
    00
  • js中Array.forEach跳出循环的方法实例

    在JavaScript中,使用Array.forEach()方法可以遍历数组,并对每一个元素执行相应的操作。在实际开发中,有时候需要在某些条件下跳出forEach循环,本文将详细讲解该如何在forEach循环中跳出循环。 方法一:使用try-catch语句 在forEach中使用try-catch语句,当需要跳出循环时,通过throw new Error()…

    JavaScript 2023年5月27日
    00
  • JavaScript中输出标签的方法

    当我们想要在JavaScript中输出一个 </script> 标签时,通常会面临一个困境:由于该标签的内容与JavaScript结束标签的语法相同,因此我们无法直接输入该标签,否则会被解析为结束当前脚本的标记。那么应该如何输出该标签呢? 下面介绍两种常见的方法。 1. 使用转义字符 在JavaScript中,可以使用转义字符对标签进行转义,在输…

    JavaScript 2023年5月28日
    00
  • javascript创建对象、对象继承的实用方式详解

    JavaScript创建对象、对象继承的实用方式详解 在JavaScript中,对象是一个重要的概念,能够帮助我们创建具有特定属性和方法的数据结构。为了更好地管理和组织代码,对象继承是一种常用的技术。本文将深入介绍JavaScript中如何创建对象以及不同的对象继承方式。 创建对象 构造函数 在JavaScript中,我们可以使用构造函数来创建一个对象。构造…

    JavaScript 2023年5月27日
    00
  • JavaScript作用域链实例详解

    JavaScript作用域链实例详解攻略 什么是作用域链 在JavaScript中,每一个执行上下文都有一个与之相关的作用域链。作用域链其实就是一条有序列表,它包含了当前执行上下文中所有可访问的变量对象和函数的引用。当JavaScript引擎查找变量时,就会沿着作用域链逐级查找,直到找到为止。如果在整个作用域链上没有找到该变量,则会报ReferenceErr…

    JavaScript 2023年5月28日
    00
  • 浅析HTML5中的 History 模式

    浅析HTML5中的 History 模式 前言 在 Web 开发中,经常会涉及到前端路由,而 History 模式是其中较为常用的一种。在 HTML5 中,History 模式提供了客户端路由的强大功能,允许我们改变 URL 且不会进行页面的刷新。 本文将从基础概念、使用方法和示例等方面进行阐述,希望能够对读者有所启发和帮助。 基础概念 浏览器路由 在传统的…

    JavaScript 2023年6月11日
    00
  • 浅析location.href跨窗口调用函数

    下面是关于“浅析location.href跨窗口调用函数”的完整攻略。 简介 在web开发中,常常需要在不同的窗口之间进行数据传递,这时候可以使用JavaScript中的location.href属性实现。location.href属性可以获取和设置当前窗口的url,并且可以跨窗口传递数据。 实现过程 要在当前窗口和目标窗口之间进行数据传递,需要以下步骤: …

    JavaScript 2023年6月11日
    00
  • JavaScript中的稀疏数组与密集数组[译]

    JavaScript中的数组可以是密集的,也可以是稀疏的。密集数组即为连续的数组元素,稀疏数组表示有些元素被省略了。本文将详细讲解JavaScript中稀疏数组和密集数组的概念和行为。 什么是稀疏数组? 稀疏数组是指数组元素具有不连续性,或者说中间有空洞的数组。在稀疏数组中,一些元素是不存在的,我们可以用下标访问到的元素即表示存在的,没法访问到的元素则被视为…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部