为啥我不能让我的表单关闭，以便我可以访问导航栏？
Posted
技术标签:
【中文标题】为啥我不能让我的表单关闭，以便我可以访问导航栏？【英文标题】：Why can't I get my form to close, so that I can access the navigation bar?为什么我不能让我的表单关闭，以便我可以访问导航栏？ 【发布时间】：2018-11-13 12:52:23 【问题描述】：我要么需要能够关闭我的表单，要么让它不覆盖在 html 页面上（最好将它放在页面的正文中），或者 我需要让表单上的“X”实际关闭表单以允许访问导航栏。
这是我的 HTML 代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Will's Grill</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="js/my.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<header>
<!--top navigation bar to guide the user thru the site-->
<div class="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT WILL'S GRILL</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="merch.html">MERCH</a></li>
<li><a href="communitysupport.html">COMMUNITY SUPPORT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</header>
<aside class="asidesection">
<h2>Contact Will's Grill</h2>
</aside>
<section>
<form action="comments.php" method="post">
<div class="shade">
<div class="blackboard">
<div class="form">
<span class="closeForm">×</span>
<p>
<label>Name: </label>
<input type="text" name="name" />
</p>
<p>
<label>Email: </label>
<input type="text" name="email" />
</p>
<p>
<label>Phone: </label>
<input type="text" name="phone" />
</p>
<p>
<label>Subject: </label>
<input type="text" name="subject" />
</p>
<p>
<label>Message: </label>
<textarea name="message"></textarea>
</p>
<p>
<input type="submit" value="send">
<input type="reset" value="reset">
</p>
</div>
</div>
</div>
</form>
</section>
</body>
<footer>
<!--bottom navigation bar to guide the user thru the site-->
<div class="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT WILL'S GRILL</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="merch.html">MERCH</a></li>
<li><a href="communitysupport.html">COMMUNITY SUPPORT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</footer>
</html>
这是我的 CSS：
@charset "utf-8";
header
background-color: orange;
width: 100%;
height: 20%;
border-radius:25px;
body
background: red;
background: linear-gradient(140deg, red 55%, yellow 40%);
background-repeat: repeat-x;
background-color: yellow;
margin-left:2%;
margin-right:2%;
border-right-color:black;
border-left-color:black;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: oblique;
font-weight: 400;
color: #000000;
font-size: large;
.nav ul
list-style-type: none;
padding: 0;
width:100%;
.nav ul li
float: left;
.nav
width: 100%;
text-align: center;
vertical-align: bottom;
display: flex;
border-radius: 25px;
background-color: orange;
overflow: hidden;
height: auto;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
.nav ul li a
display: inline-block;
font-size: 25px;
margin: 20px;
line-height: normal;
vertical-align:super;
padding: .5em;
border-right: 1px solid #000000;
border-radius: .5;
color: black;
.nav ul a:focus
color: red;
border-color: red;
.asidesection
text-align: center;
font-size: xx-large;
.columns font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 100%;
width: 95%;
margin-right: auto;
margin-left: auto;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
div.a
text-indent: 50px;
.barbecue
height:400px;
width:500px;
float:left;
margin:2%;
.words
background: rgba(256, 256, 256, .5);
border: 2px solid orange;
border-radius:5px;
width: auto;
margin: 2%;
overflow: auto;
padding:1%;
img
border-radius: 20px;
border-color: transparent;
border-style: solid;
border-width: 10px;
form
height: 100%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/concrete-wall-background.jpg) center center fixed;
background-size: cover;
.shade
overflow: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient( 150deg, rgba(0, 0, 0, 0.65), transparent);
.blackboard
position: relative;
width: 640px;
margin: 7% auto;
border: tan solid 12px;
border-top: #bda27e solid 12px;
border-left: #b19876 solid 12px;
border-bottom: #c9ad86 solid 12px;
box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
background-color: #333;
.blackboard:before
box-sizing: border-box;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient( 175deg, transparent, transparent 40px, rgba(120, 120, 120, 0.1) 100px, rgba(120, 120, 120, 0.1) 110px, transparent 220px, transparent), linear-gradient( 200deg, transparent 80%, rgba(50, 50, 50, 0.3)), radial-gradient( ellipse at right bottom, transparent, transparent 200px, rgba(80, 80, 80, 0.1) 260px, rgba(80, 80, 80, 0.1) 320px, transparent 400px, transparent);
border: #2c2c2c solid 2px;
content: "Contact Us";
font-family: 'Permanent Marker', cursive;
font-size: 2.2em;
color: rgba(238, 238, 238, 0.7);
text-align: center;
padding-top: 20px;
.form
padding: 70px 20px 20px;
p
position: relative;
margin-bottom: 1em;
label
vertical-align: middle;
font-family: 'Permanent Marker', cursive;
font-size: 1.6em;
color: rgba(238, 238, 238, 0.7);
p:nth-of-type(5) > label
vertical-align: top;
input,
textarea
vertical-align: middle;
padding-left: 10px;
background: none;
border: none;
font-family: 'Permanent Marker', cursive;
font-size: 1.6em;
color: rgba(238, 238, 238, 0.8);
line-height: .6em;
outline: none;
textarea
height: 120px;
font-size: 1.4em;
line-height: 1em;
resize: none;
input[type="submit"]
cursor: pointer;
color: rgba(238, 238, 238, 0.7);
line-height: 1em;
padding: 0;
input[type="submit"]:focus
background: rgba(238, 238, 238, 0.2);
color: rgba(238, 238, 238, 0.2);
::-moz-selection
background: rgba(238, 238, 238, 0.2);
color: rgba(238, 238, 238, 0.2);
text-shadow: none;
::selection
background: rgba(238, 238, 238, 0.4);
color: rgba(238, 238, 238, 0.3);
text-shadow: none;
.closeForm
color: white;
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
这是我的 jQuery：
// All CSS except the concrete wall
$('.closeForm').click(function ()
//close action
);
【问题讨论】：
How to hide Bootstrap modal from javascript?的可能重复 【参考方案1】：只需像这样编辑你的 js：
$('.closeForm').click(function ()
$('.shade').hide();
);
【讨论】：
【参考方案2】：$('.closeForm').click(function ()
$('.shade').hide();
);header
background-color: orange;
width: 100%;
height: 20%;
border-radius:25px;
body
background: red;
background: linear-gradient(140deg, red 55%, yellow 40%);
background-repeat: repeat-x;
background-color: yellow;
margin-left:2%;
margin-right:2%;
border-right-color:black;
border-left-color:black;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: oblique;
font-weight: 400;
color: #000000;
font-size: large;
.nav ul
list-style-type: none;
padding: 0;
width:100%;
.nav ul li
float: left;
.nav
width: 100%;
text-align: center;
vertical-align: bottom;
display: flex;
border-radius: 25px;
background-color: orange;
overflow: hidden;
height: auto;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
.nav ul li a
display: inline-block;
font-size: 25px;
margin: 20px;
line-height: normal;
vertical-align:super;
padding: .5em;
border-right: 1px solid #000000;
border-radius: .5;
color: black;
.nav ul a:focus
color: red;
border-color: red;
.asidesection
text-align: center;
font-size: xx-large;
.columns font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 100%;
width: 95%;
margin-right: auto;
margin-left: auto;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
div.a
text-indent: 50px;
.barbecue
height:400px;
width:500px;
float:left;
margin:2%;
.words
background: rgba(256, 256, 256, .5);
border: 2px solid orange;
border-radius:5px;
width: auto;
margin: 2%;
overflow: auto;
padding:1%;
img
border-radius: 20px;
border-color: transparent;
border-style: solid;
border-width: 10px;
form
height: 100%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/concrete-wall-background.jpg) center center fixed;
background-size: cover;
.shade
overflow: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient( 150deg, rgba(0, 0, 0, 0.65), transparent);
.blackboard
position: relative;
width: 640px;
margin: 7% auto;
border: tan solid 12px;
border-top: #bda27e solid 12px;
border-left: #b19876 solid 12px;
border-bottom: #c9ad86 solid 12px;
box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
background-color: #333;
.blackboard:before
box-sizing: border-box;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient( 175deg, transparent, transparent 40px, rgba(120, 120, 120, 0.1) 100px, rgba(120, 120, 120, 0.1) 110px, transparent 220px, transparent), linear-gradient( 200deg, transparent 80%, rgba(50, 50, 50, 0.3)), radial-gradient( ellipse at right bottom, transparent, transparent 200px, rgba(80, 80, 80, 0.1) 260px, rgba(80, 80, 80, 0.1) 320px, transparent 400px, transparent);
border: #2c2c2c solid 2px;
content: "Contact Us";
font-family: 'Permanent Marker', cursive;
font-size: 2.2em;
color: rgba(238, 238, 238, 0.7);
text-align: center;
padding-top: 20px;
.form
padding: 70px 20px 20px;
p
position: relative;
margin-bottom: 1em;
label
vertical-align: middle;
font-family: 'Permanent Marker', cursive;
font-size: 1.6em;
color: rgba(238, 238, 238, 0.7);
p:nth-of-type(5) > label
vertical-align: top;
input,
textarea
vertical-align: middle;
padding-left: 10px;
background: none;
border: none;
font-family: 'Permanent Marker', cursive;
font-size: 1.6em;
color: rgba(238, 238, 238, 0.8);
line-height: .6em;
outline: none;
textarea
height: 120px;
font-size: 1.4em;
line-height: 1em;
resize: none;
input[type="submit"]
cursor: pointer;
color: rgba(238, 238, 238, 0.7);
line-height: 1em;
padding: 0;
input[type="submit"]:focus
background: rgba(238, 238, 238, 0.2);
color: rgba(238, 238, 238, 0.2);
::-moz-selection
background: rgba(238, 238, 238, 0.2);
color: rgba(238, 238, 238, 0.2);
text-shadow: none;
::selection
background: rgba(238, 238, 238, 0.4);
color: rgba(238, 238, 238, 0.3);
text-shadow: none;
.closeForm
color: white;
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Will's Grill</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="js/my.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<header>
<!--top navigation bar to guide the user thru the site-->
<div class="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT WILL'S GRILL</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="merch.html">MERCH</a></li>
<li><a href="communitysupport.html">COMMUNITY SUPPORT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</header>
<aside class="asidesection">
<h2>Contact Will's Grill</h2>
</aside>
<section>
<form action="comments.php" method="post">
<div class="shade">
<div class="blackboard">
<div class="form">
<span class="closeForm">×</span>
<p>
<label>Name: </label>
<input type="text" name="name" />
</p>
<p>
<label>Email: </label>
<input type="text" name="email" />
</p>
<p>
<label>Phone: </label>
<input type="text" name="phone" />
</p>
<p>
<label>Subject: </label>
<input type="text" name="subject" />
</p>
<p>
<label>Message: </label>
<textarea name="message"></textarea>
</p>
<p>
<input type="submit" value="send">
<input type="reset" value="reset">
</p>
</div>
</div>
</div>
</form>
</section>
</body>
<footer>
<!--bottom navigation bar to guide the user thru the site-->
<div class="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT WILL'S GRILL</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="merch.html">MERCH</a></li>
<li><a href="communitysupport.html">COMMUNITY SUPPORT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</footer>
</html>不确定要隐藏哪个元素。
【讨论】：
【参考方案3】：这不会完全解决您的关闭按钮，但它应该解决加载 js 以启用事件侦听器的问题。
1) 您在标头中声明 js 文件的时间早于 jquery 脚本。 js文件需要jquery。 js文件将尝试加载，但由于缺少库而无法加载。
<script src="js/my.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
正确的顺序应该是：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/my.js"></script>
2) 在下面的 my.js 文件中，由于尚未加载 DOM，因此无法理解引用。这是由于将脚本放置在 head 标记中。
$('.closeForm').click(function ()
//close action
);
改为使用 document ready，以便在 DOM 加载后加载 javascript 文件。
$(document).ready(function ()
$('.closeForm').click(function (event)
//close action
console.log("Testing.");
);
);
【讨论】：
在我小组其他人的帮助下，我们能够找出导致表单不在页面上的 CSS 代码（以允许访问导航栏。我们已经删除了“ shade”，以及一些创建混凝土墙的背景代码，现在一切都可以访问了。顺便说一句：我是一名学生，这是我的网页设计课。我认为这个论坛是一个提问的地方寻求帮助，但我注意到我被阻止提出更多问题。幸好我的学业快完成了。以上是关于为啥我不能让我的表单关闭，以便我可以访问导航栏？的主要内容，如果未能解决你的问题，请参考以下文章