Html 如何在模态窗口内设置窗体中的焦点
我有下面的脚本，它打开了一个带有表单的模式窗口。我现在想做的是修改它，这样当模式窗口出现时，焦点会自动提供给文本输入框。我试过Html 如何在模态窗口内设置窗体中的焦点,html,css,Html,Css,我有下面的脚本，它打开了一个带有表单的模式窗口。我现在想做的是修改它，这样当模式窗口出现时，焦点会自动提供给文本输入框。我试过自动对焦，但似乎不起作用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Modal Example</title> <style> #container{
自动对焦<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Modal Example</title>
<style>
#container{
margin:0 auto;
width:80%;
font-family: verdana,arial,sans-serif;
font-size:16px;
}
#modalWindow {
position: fixed;
font-family: arial,helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
transition: opacity 400ms linear;
pointer-events: none;
}
#modalWindow:target {
opacity:1;
pointer-events: auto;
}
#modalWindow > div {
width: 400px;
height: 240px;
position: relative;
margin: 10% auto;
padding: 20px 20px 13px 20px;
border: solid;
border-color: black;
border-width : 2px;
background: #DAF7A6;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>CSS Modal Example</h1>
<a href="#modalWindow">Open modal</a>
<div id="container">
<p>
This is the main page.
</p>
</div>
<div id="modalWindow">
<div>
<a href="#close">Close modal</a><br>
<p>
This is the modal. Put any text or controls here.
<form action="/" method="post">
<input id="event" type="text" name="event">
<input type="submit" value="Submit">
</form>
</p>
</div>
</div>
</body>
</html>
CSS模态示例
#容器{
保证金：0自动；
宽度：80%；
字体系列：verdana、arial、无衬线字体；
字体大小：16px；
}
#模态窗口{
位置：固定；
字体系列：arial、helvetica、无衬线字体；
排名：0；
右：0；
底部：0；
左：0；
背景：rgba（0,0,0,0.4）；
z指数：99999；
不透明度：0；
过渡：不透明度400ms线性；
指针事件：无；
}
#modalWindow：目标{
不透明度：1；
指针事件：自动；
}
#modalWindow>div{
宽度：400px；
高度：240px；
位置：相对位置；
利润率：10%自动；
填充：20px 20px 13px 20px；
边框：实心；
边框颜色：黑色；
边框宽度：2倍；
背景：#DAF7A6；
边界半径：10px；
}
CSS模态示例
这是主页。
这是模态。在此处放置任何文本或控件。
CSS模态示例
#容器{
保证金：0自动；
宽度：80%；
字体系列：verdana、arial、无衬线字体；
字体大小：16px；
}
#模态窗口{
位置：固定；
字体系列：arial、helvetica、无衬线字体；
排名：0；
右：0；
底部：0；
左：0；
背景：rgba（0,0,0,0.4）；
z指数：99999；
不透明度：0；
过渡：不透明度400ms线性；
指针事件：无；
}
#modalWindow.show{
不透明度：1；
指针事件：自动；
}
#modalWindow>div{
宽度：400px；
高度：240px；
位置：相对位置；
利润率：10%自动；
填充：20px 20px 13px 20px；
边框：实心；
边框颜色：黑色；
边框宽度：2倍；
背景：#DAF7A6；
边界半径：10px；
}
CSS模态示例
开放模态
这是主页。
关闭模式
这是模态。在此处放置任何文本或控件。
const modalWindow=document.querySelector（“#modalWindow”）；
const inputEvent=modalWindow.querySelector（“#事件”）；
常量toggleModal=（）=>{
modalWindow.classList.toggle（'show'）；
if（modalWindow.classList.contains（'show'））{
inputEvent.focus（）；
}
}
document.querySelector（“#show modal”）.addEventListener（'click'，toggleModal）；
document.querySelector（“#隐藏模式”）.addEventListener（'click'，toggleModal）；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Modal Example</title>
<style>
#container{
margin:0 auto;
width:80%;
font-family: verdana,arial,sans-serif;
font-size:16px;
}
#modalWindow {
position: fixed;
font-family: arial,helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
transition: opacity 400ms linear;
pointer-events: none;
}
#modalWindow.show {
opacity:1;
pointer-events: auto;
}
#modalWindow > div {
width: 400px;
height: 240px;
position: relative;
margin: 10% auto;
padding: 20px 20px 13px 20px;
border: solid;
border-color: black;
border-width : 2px;
background: #DAF7A6;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>CSS Modal Example</h1>
<button id="show-modal">Open modal</button>
<div id="container">
<p>
This is the main page.
</p>
</div>
<div id="modalWindow">
<div>
<button id="hide-modal">Close modal</button><br>
<p>
This is the modal. Put any text or controls here.
<form action="/" method="post">
<input id="event" type="text" name="event">
<input type="submit" value="Submit">
</form>
</p>
</div>
</div>
</body>
<script>
const modalWindow = document.querySelector('#modalWindow');
const inputEvent = modalWindow.querySelector('#event');
const toggleModal = () => {
modalWindow.classList.toggle('show');
if (modalWindow.classList.contains('show')) {
inputEvent.focus();
}
}
document.querySelector('#show-modal').addEventListener('click', toggleModal);
document.querySelector('#hide-modal').addEventListener('click', toggleModal);
</script>
</html>