为什么我不能让我的表单关闭，以便我可以访问导航栏？

时间：2018-06-04 08:29:13

标签： javascript jquery html5 css3

我要么必须能够关闭我的表单，要么让它不覆盖在html页面上（将它放在页面正文中会很好），或者 我需要拥有我的＆＃34; X＆＃34;在窗体上实际上关闭窗体以允许访问导航栏。

这是我的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 个答案:

答案 0 :(得分：0)

只需编辑你的js：

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

答案 1 :(得分：0)

＆＃13;
＆＃13; 
$('.closeForm').click(function () {
   $('.shade').hide();
});
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

不确定要隐藏哪个元素。

答案 2 :(得分：0)

这不会完全解决你的关闭按钮，但它应解决加载你的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.");
    });
});
相关问题
最新问题