Javascript 简单模式赢得'；点击不显示_Javascript_Html_Css_Simplemodal

Javascript 简单模式赢得'；点击不显示

javascript html css

Javascript 简单模式赢得'；点击不显示,javascript,html,css,simplemodal,Javascript,Html,Css,Simplemodal,当我按下按钮时，我确实有模式工作和显示。但是，现在（不确定我是如何做到的）我无法打开模式框我有我的页面作为一个图像，然后在图像下面的按钮打开模式这是我的HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel=

当我按下按钮时，我确实有模式工作和显示。但是，现在（不确定我是如何做到的）我无法打开模式框

我有我的页面作为一个图像，然后在图像下面的按钮打开模式

这是我的HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://kit.fontawesome.com/454c24fdd9.js"></script>
<title>Elle and Belle Design</title>
</head>

<body>
    <div class="logo">
        <a href="home.html.jpg"><img src="logo.png" class="logoimg"></a>
    </div>

    <nav class="main-nav">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="info.html">Information</a></li>
            <li class="products">
                <a href="products.html" class="dropdown">Products</a>
                    <div class="dropdown-content">
                    <a href="headbands.html">Headbands</a>
                    <a href="earrings.html">Earrings</a>
                    <a href="Other.html">Other</a>
            </div></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>

    <div class="header">
        <h1>Elle and Belle Design</h1>
        <h2>Bespoke Handmade Headbands and Accessories</h2>
    </div>

</div>

<div class="mainbody">

    <div class="sidebar">
        <h3>Updates</h3>
    </div>

    <div class="section-1">
        <img src="silverband.jpg" class="previewimg"><br>
        <button class="headbutton">Preview</button>

        <div id="headmodal" class="modal">

        <div class="modal-content">

        <span class="close">&times;</span>

        <p7>Belle Band</p7><br>
        <img src="silverband.jpg" class="headbands">
        <img src="silverbandon.jpg" class="headbands">
        <p6>£15</p6><br>
        <p4>Our Belle Band is hand-crafted with love and care in both thick and thin sizes.</p4><br>
        <p4>We use a range of small silver jewels incorporated with white pearls and flowers for that ultimate wedding look</p4>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("headmodal");

// Get the button that opens the modal
var btn = document.getElementById("headbutton");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
    </div>



</div>


<div class="footer">
        <div id="socialmedia">
            <i class="fab fa-facebook-square fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
            <i class="fab fa-instagram fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
            <i class="fab fa-twitter-square fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
        </div>
        <br>
        <p3>Find Us on Social Media</p>
    </div>

</body>
</html>

我不知道为什么它突然不让我打开模态

请帮忙

谢谢

玛丽

原因很简单，那就是你忘了以正确的方式获得btn。您希望使用getElementById获取按钮，但页面中没有具有此id的元素，这是错误部分

因此，您可以将class属性更改为id，也可以在javascript代码中使用getElementByClassName获取按钮

我希望这有帮助：）

您可以将btn.onclick函数更改为常规函数，例如：

功能按钮单击（）{
modal.style.display=“块”；
}

并调用按钮标记中的onclick方法：

预览

工作区：

我这样做也是为了您的

span.onclick

函数

这将使您的模式再次出现。希望这有帮助。

正如我所看到的，在JS代码中，您试图以错误的方式获取按钮。 getElementById在这种情况下不起作用，因为您的按钮没有id属性

也许试着像这样抓住按钮：文档查询选择器（“标题按钮”）

让我知道它是否解决了问题

有关querySelector的更多信息，请参阅

另外请参见querySelectorAll

Hi，我无法通过更改getelementclass名称来实现这一点，但是，它确实可以使用ID！谢谢你，Maryi如果你想把它改成getElementByClassName，那么你应该写一个for循环，把你的onclick事件分配给它，或者像你对close buttonHi所做的那样得到第一个。谢谢你的回复，我已经把按钮改成了一个iD，它似乎做到了。只是出于好奇，我以前没有见过。querySelector。这到底是做什么的？document.querySelector（）是一个函数，它返回与给定参数匹配的第一个元素。示例：document.querySelector（'.container'）将返回一个值为“container”的具有“class”属性的元素。另一方面，document.querySelectorAll（）返回与给定选择器匹配的所有元素。示例：document.querySelectorAll（“'ul.listItem”）将返回嵌套在

* {
    box-sizing: border-box;
}

@media screen and (max-width: 600px) {
    .main-body {
        flex-direction: column;
    }
}





/* Fonts */

@font-face {
    font-family: 'greatvibes';
    src: local('greatvibes.otf');
    src: url('greatvibes.otf');
    format: ('opentype');
  }

@font-face {
    font-family: 'tenderness';
    src: local('tenderness.otf');
    src: url('tenderness.otf');
    format: ('opentype');
}





/* Headings and Paragraphs */

h1 {
    font-family: 'greatvibes';
    font-size: 7vw;
    font-weight: bold;
}

h2 {
    font-family: 'greatvibes';
    font-size: 3.5vw;
}

h3 {
    font-family: 'greatvibes';
    font-size: 2vw;
    text-align: center;
}

h4 {
    font-family: 'greatvibes';
    font-size: 2vw;
    text-align: center;
    margin-bottom: 0;
}

p2 {
    font-family: 'greatvibes';
    font-size: 1.9vw;
}

p3 {
    font-family: 'greatvibes';
    font-size: 2vw;
}

p4 {
    font-family: 'tenderness';
    font-size: 1.5vw;
    line-height: 2.5vw;
}

p5 {
    font-family: 'tenderness';
    font-size: 1.5vw;
    line-height: 2.5vw;
}


p6 {
    font-family: 'greatvibes';
    font-size: 4vw;
}

p7 {
    font-family: 'greatvibes';
    font-size: 4vw;
}

/* Sections */

.header {
    padding: 17vw;
    text-align: center;
    height: auto;
    background-image: url("decorhands.jpg");
    background-size: 100%;
}

body {
    margin: 0;
    padding: 0;
    background:whitesmoke;
    font-family: 'tenderness';
}

.mainbody {
    display: flex;
    flex-wrap: wrap;
}

.sidebar {
    flex: 20%;
    background-color: #FEDCD2;
    min-height: 500px;
    text-align: center;
    padding: 1vw;
}

.section-1 {
    flex: 80%;
    background-color:whitesmoke;
}

.bands {
    flex: 50%;
    padding: 1em;
}

.footer {
    padding: 20px;
    text-align: center;
    background: #bfd8d2;
    min-height: 10vw;
}

.socialmedia {
    display: flex;
    align-items: flex-end;
}

.home {
    width: 100%;
    height: auto;
    opacity: 0.7;
}



/* Navigation bar */

.main-nav {
    display: flex;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 0.9;
    height: 5vw;
    width: 100%;
}

.main-nav ul {
    list-style-type: none;
    margin: 0 0 0 20vw;
    padding: 0;
    overflow: visible;
    top: 0;
    width: 100%;
    height: 5vw;
}

.main-nav ul li {
    display: inline-block;
    text-align: center;
    margin-left: 2vw;
    height: 5vw;
}

.main-nav li {
    float: left;
    height: 5vw;
}

.logoimg {
    height: 5vw;
    width: auto;
    float: left;
    position: fixed;
    margin-left: 1vw;
    z-index: 1;
}

.main-nav li a, .dropdown {
    display: block;
    padding: 1.2em 2.2em;
    text-decoration: none;
    color: whitesmoke;
    text-align: center;
    font-family: 'tenderness';
    font-size: 1.5vw;
    height: 5vw;
    border-bottom: 0.3vw solid transparent;
}

.main-nav li a:after {
    display: block;
    content: '';
    border-bottom: 0.3vw solid whitesmoke;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    height: 1.2vw;
    min-width: 6vw;
}

.main-nav li a:hover:after {
    height: 1.2vw;
    transform: scaleX(1);
}

.main-nav a:active {
    border-bottom: 1vw solid whitesmoke;
}

li.products {
    display: inline-block;
    height: 5vw;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.35);
    min-width: 8vw;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
    text-align: center;
    height: 5vw;
}

.products:hover .dropdown-content {
    display: block;
}



/* Contact Form */

.contact-header {
    margin-top: 5px;
}

.contact-header h3 {
    font-size: 2.5vw;
    text-align: center;
}

.contact-form {
    text-align: center;
}

.form-control {
    width: 80%;
    background: transparent;
    border: none;
    outline: none;
    color: black;
    font-size: 1.2vw;
    border-bottom: 0.2vw solid #DF744A;
    margin-bottom: 1vw;
    padding: 0.5vw;
}

form .submit {
    background-color: #DF744A;
    border-color: transparent;
    color: whitesmoke;
    font-size: 1.5vw;
    text-align: center;
}

form .submit:hover {
    background-color: rgb(209, 84, 35);
    cursor: pointer;
}

/*Headband Modal*/

.modal {
    display: none;
    position: fixed; 
    z-index: 1; 
    padding: 10vw; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4);
}


.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.headbands {
    height: auto;
    width: 30vw;
}

.previewimg {
    width: 20vw;
    height: auto;
    margin: 1vw;
}