堆栈内存溢出
  繁体   English   中英

为什么无法关闭表单，以便可以访问导航栏？

[英]Why can't I get my form to close, so that I can access the navigation bar?

 原文  2018-06-04 08:29:13  8   3    javascript/ jquery/ html5/ css3

问题描述

我要么需要能够关闭我的表单，要么使它不覆盖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">&times;</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
});

3 个解决方案

解决方案1
 0  2018-06-04 08:39:30

像这样编辑您的js： 

$('.closeForm').click(function () {
    $('.shade').hide();
});

解决方案2
 0  2018-06-04 08:40:03

 $('.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">&times;</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
 0  2018-06-04 08:57:39

这不会完全解决您的关闭按钮，但是应该解决加载js以启用事件侦听器的问题。

1）您在标题中的jQuery脚本之前声明了js文件。 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
});

而是使用文档准备好，以便在加载DOM之后加载javascript文件。 

$(document).ready(function () {
    $('.closeForm').click(function (event) {
        //close action
        console.log("Testing.");
    });
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我无法在表单中获取输入值 我无法关闭我的表格 如何通过单击导航栏（单站点页面）中的链接来关闭导航栏？ 我无法更改导航栏中文本的颜色 当用户位于HOME页面时，如何选择导航栏中的“ HOME”链接？ 为什么我不能提交表格？ 为什么，如果我离开这么长的表单页面，ajax无法在该页面中发送我的请求 为什么我不能关闭剑道窗口 我的导航无法滚动更改 我无法让全球导航走我的风格
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM