如何使用JavaScript创建模态弹出窗口？
要使用JavaScript创建模态弹出窗口，您可以按照以下步骤进行操作：
- 创建HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态弹出窗口示例</title>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
</style>
</head>
<body>
<button id="openModal">打开模态窗口</button>
<div id="myModal" class="modal">
<div class="modal-content">
<h2>模态弹出窗口</h2>
<p>这是一个模态弹出窗口的示例。</p>
<button id="closeModal">关闭模态窗口</button>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btnOpen = document.getElementById("openModal");
var btnClose = document.getElementById("closeModal");
btnOpen.onclick = function() {
modal.style.display = "block";
}
btnClose.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>- 在上述代码中，我们创建了一个具有模态窗口样式的
<div>元素，并将其设置为隐藏状态。 - 使用JavaScript，我们获取了模态窗口、打开模态窗口按钮和关闭模态窗口按钮的引用。
- 通过为打开和关闭按钮添加
onclick事件监听器，我们可以在单击它们时更改模态窗口的显示状态。
这样，当用户单击“打开模态窗口”按钮时，模态弹出窗口将显示出来，而单击“关闭模态窗口”按钮时，模态窗口将关闭。
在这个示例中，我们使用了纯HTML、CSS和JavaScript来创建模态弹出窗口，而没有涉及到任何云计算相关的技术。
相关·内容
2回答
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed
浏览 2提问于2020-08-07得票数 0
回答已采纳
我已经创建了一个简单的模式对话框，如下面的代码所示，我将使用它在web表单的特定位置添加帮助。 我想添加一个滑动动画效果，使对话框在模式打开时滑入屏幕，并在模式关闭时滑回屏幕： ? 对于我想要实现的目标，我找不到解决方案。我的模式代码目前看起来像这样： function openModal(mod_name){
var modal = document.getElementById(mod_name);
modal.style.display = "block";
window.onclick = function(event) {
if (e
浏览 16提问于2019-03-11得票数 5
回答已采纳
1回答
我想要创建一个模态盒。当用户单击按钮时，当用户单击模式框中的“关闭”按钮时，应该出现“关闭”按钮。我做了两件事：
check()：它改变了css。点击后，显示模态框
close()：这个函数应该关闭模式框，但它不是，它应该设置以前的css设置。当我单击“关闭”按钮(span元素)时，此函数根本不执行。
为什么关闭功能不起作用，我应该现代化什么才能得到结果？
(预先谢谢)
function check() {
var modal = document.getElementById("myModal");
modal.style.display
浏览 2提问于2018-01-16得票数 0
回答已采纳
我想做一些模态弹出弹出，但我没有太多的了解模式弹出窗口和他们的代码。
所以我想改变模式的内部弹出与文本框，这是在主网页上。我会写一些东西到文本框，然后当我点击按钮，里面的模式弹出应该被改变。也有一个文本框内的模式弹出与按钮，当我写一些东西，并点击进入段的主网页应该也要改变。
我试过这样的方法：
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<input type="text" id="to" value="Something">
&
浏览 4提问于2017-09-22得票数 0
回答已采纳
1回答
我正在使用这个CSS/JS模式，我想知道是否有任何方法可以像我们在bootstrap模式中使用数据切换那样将数据传递到模式。 我打算在PHP内使用while循环，以便打印不同的按钮，我想在单击该按钮后将数据传递给modal，以便与该行相关的数据将被传递到modal或在单击后打印在按钮上。 这种类型的情态动词有可能吗？ <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
浏览 21提问于2020-12-09得票数 2
回答已采纳
2回答
我试图创建一个浮动模式弹出，它位于屏幕的右上角。我希望背景是积极的(在我可以做的事情通常在网页上，而不是弹出干扰它。
当我想将模式调整到内部的内容时，问题就出现了。例如，如果我要在弹出窗口中写一个段落，它会自动调整模态的大小，以包含文本。最好，我希望宽度是恒定的，但我希望它向下延伸，取决于文本。
到目前为止，我的情况如下：
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var bt
浏览 0提问于2017-07-27得票数 1
回答已采纳
1回答
我有两个模态窗。第一个正确工作，问题在第二个，当我点击第二个<>，它不工作。我怎么做，这样当你点击第二个模态，它开始工作。当站点上只有一个带id的块时。这是带有css的html代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
浏览 7提问于2022-04-01得票数 -1
是否有人知道，只有当带有id="myModal3“的div具有内联样式以显示=”块“时，才能在5秒内打开div；
我只是在学习javascript，在这方面花了太多时间。代码在这里，请提前感谢您：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-se
浏览 2提问于2022-01-05得票数 0
回答已采纳
1回答
我正在尝试创建一个简单的模式。我希望它在用户单击窗口上的任何位置时关闭-但是，只有当用户在模式之外单击时，模式才会关闭，即使事件目标被设置为整个模式。
我知道问题出在javascript代码的最后一行，但我不明白为什么……我定义了e.target == modal，其中modal是整个模型的超文本标记语言元素，包括孩子的元素(通过modal-content的类)。但是，modal-content类似乎不受e.target == modal的影响。
下面是完整的代码：
//Get modal element
var modal = document.getElementById('sim
浏览 0提问于2018-08-29得票数 1
1回答
想要创建多个Modal弹出窗口。下面的代码适用于一个弹出窗口，但我将如何执行3个弹出窗口呢？？我只是在学习..。显然整个代码不会粘贴..。使用手机
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /
浏览 4提问于2017-04-19得票数 0
1回答
我想创建多个按钮，每个按钮打开一个不同的模式使用以下代码的逻辑，或另一个类似的方式来实现这一点。
我不想使用任何库或框架，只想使用普通的Javascript。
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the moda
浏览 2提问于2021-05-12得票数 1
3回答
我已经在我的网站上设置了一个模式框，通过一个链接触发，这是它应该发挥的功能。
我希望添加第二个Modal框来加载另一个内容，但两个按钮打开相同的框，我似乎无法到达它的底部。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.modal
浏览 0提问于2020-08-10得票数 1
1回答
未显示js弹出窗口
、、、
如果有人能帮助我在codepen.io上解决一个简单的代码问题，我将不胜感激(令人惊讶的是，它在这里也可以工作)，但不是在我的pc上。我尝试在包含代码本身的文件中添加jQuery <script src="jquery-3.4.1.min.js"></script>。但是当点击按钮时，弹出窗口不会出现。我错过了什么或者做错了什么？提前感谢
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
浏览 0提问于2019-07-15得票数 0
1回答
我正在尝试创建多个模态来显示不同的数据。我看过其他例子(关于堆栈溢出)，并实现了代码，但它仍然不适用于我。基本上，在这一点上，我只是想让它工作，并从WW3学校的网页上复制了脚本。我有两个examples...one，只有一个模式(可以工作)，然后第二个模式(应该显示不同的数据(这不工作)。但是当我删除第一个模式时，第二个模式就起作用了。我已经包含了整个页面，以防它的另一个问题，我还检查了元素，它说没有错误。我希望你能帮助我！
第一个例子只有一个模式(works)。
<!DOCTYPE html>
<html lang="en">
<head>
浏览 1提问于2016-10-31得票数 0
3回答
好吧，这就是问题所在。我有一个简单的模态结构如下：
HTML：
<div class = "wrapper">
<img src = "conselhoantoniobrennand.png">
<div class = "overlay">
<div class = "content">
<h2> Antônio Brenannd </h2>
浏览 0提问于2018-06-29得票数 4
回答已采纳
1回答
PHP中的模式包括
、、、
我试图在PHP中使用包含函数的模式，但是我猜header.php文件有一个错误。
下面是模态的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<?php include 'header.php'; ?>
</head>
<body>
<button id="myBtn">Open Modal</button>
<div id="myModal" class
浏览 2提问于2016-05-30得票数 1
1回答
我有一个带有自动对焦的按钮。当用户单击按钮(或按下"enter键“，因为它具有自动焦点)时，会弹出一个模式。该模式也有一个输入字段和自动焦点属性。当用户在那里输入某些内容并按下"enter键“后，模式将被关闭。
我希望在关闭模式后，初始按钮再次聚焦。但我不能让它起作用。
我尝试将autofocus属性添加到按钮本身，也尝试将document.getElementById("myBtn").focus();添加到关闭该模式的函数中。都没起作用。
我试着将输入字段替换为一个按钮来关闭模式，它就是这样工作的，所以我猜这个问题与输入中的onKeyDown="if
浏览 0提问于2018-10-26得票数 1
回答已采纳
1回答
当用户在close iOS和非接触式设备上单击模态窗口外时，如何使此代码成为modal？
我知道这里还有一些关于window.onclick和touch设备的类似主题，但是我对JS还比较陌生，我不知道如何正确地组合这个功能(对于这两个平台)。
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn
浏览 0提问于2018-09-26得票数 0
回答已采纳
1回答
我确信这是一个非常简单的问题，但是我在使用javascript打开两个模式窗口时遇到了麻烦。
所需的效果将是每个按钮打开自己的模式
HTML
<!-- Modal 1 -->
<div id="myModal-1" class="modal">
<div class="modal-content">
<div class="box-content">
<h2>Modal 1</h2>
<span class="
浏览 0提问于2017-02-04得票数 1
1回答
模态不显示
、、
我大约有24秒的时间来点燃我的内衣着火沮丧。
本质上，我正在制作一个简单的联系人信息表单，它将将输入提交到外部PHP页面进行处理，并且，与此问题相关的是，在提交时弹出第二个模式，确认表单已发送给用户。当你按“提交”键时，弄清楚如何让表单保持在同一页上是另一个问题；我不明白的是，为什么当你点击“提交”按钮时，“谢谢你的兴趣等等”的第二种模式就不会出现。快把我逼疯了！
谢谢你的帮助，我是一个业余程序员，并愿意接受任何和所有的建议/批评。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"&
浏览 3提问于2020-03-05得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
