enter code here
这是我的form.html，它是从modal.html中的智能手机部门调用的。form.html正常工作，而modal.html存在问题
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form action="mailto:[email protected]" method="post" enctype="text/plain">
<div class="form-group">
<label for="To">To:</label>
<input type="text" class="form-control" id="To" valu="[email protected]">
</div>
<div class="form-group">
<label for="From">From:</label>
<input type="text" class="form-control" id="From" placeholder="Enter Your Phone No.">
</div>
<div class="form-group">
<textarea id="message" name="message" placeholder="Write something.." style="height:100px; width :100%;"></textarea>
</div>
<button type="submit" class="btn btn-default" style="width: 100%; background-color: #4CAF50;
color: white;">Send</button>
</form>
</div>
</body>
</html>modal.html我创建了一个小的悬停sidenavbar按钮，但是通过单击Text现在，按钮div名为“ smartphone”的分区并没有显示该分区包含引导设备外观，该外观包含从form.html调用的表单
#mySidenav a {
position: absolute;
right: -80px;
transition: 0.3s;
padding: 15px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 5px 0 0 5px;
}
#mySidenav a:hover {
right : 0;
}
#about {
top: 20px;
background-color: #4CAF50;
}
/* The device with borders */
.smartphone {
position: relative;
width: 360px;
height: 640px;
margin: auto;
border: 16px black solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}
/* The device with borders */
.smartphone {
position: relative;
width: 360px;
height: 640px;
margin: auto;
border: 16px black solid;
border-top-width: 60px;
border-bottom-width: 60px;
border-radius: 36px;
}
/* The horizontal line on the top of the device */
.smartphone:before {
content: '';
display: block;
width: 60px;
height: 5px;
position: absolute;
top: -30px;
left: 50%;
transform: translate(-50%, -50%);
background: #333;
border-radius: 10px;
}
/* The circle on the bottom of the device */
.smartphone:after {
content: '';
display: block;
width: 35px;
height: 35px;
position: absolute;
left: 50%;
bottom: -65px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
}
/* The screen (or content) of the device */
.smartphone .content {
width: 360px;
height: 640px;
background: white;
}
.smartphone{
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Text Me Now Demo</h2>
<p>In this example, I given a short demo of my work</p>
<div id="mySidenav" class="sidenav">
<a id="about" onclick="myFunction" ><i class="fa fa-fw fa-envelope"></i>Text Us Now</a>
</div>
<div class="smartphone">
<div class="content">
<iframe src="form.html" style="width:100%;border:none;height:100%"></iframe>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementsByClassName("smartphone");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>在函数后用方括号将锚点更改为onclick="myFunction()"，并使用document.querySelector()代替document.getElementsByClassName()，因此var x = document.querySelector(".smartphone");
更新的正文：
<body>
<h2>Text Me Now Demo</h2>
<p>In this example, I given a short demo of my work</p>
<div id="mySidenav" class="sidenav">
<a id="about" onclick="myFunction()" ><i class="fa fa-fw fa-envelope"></i>Text Us Now</a>
</div>
<div class="smartphone">
<div class="content">
<iframe src="form.html" style="width:100%;border:none;height:100%"></iframe>
</div>
</div>
<script>
function myFunction() {
var x = document.querySelector(".smartphone");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>