Question

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

我将页面布置为图像，然后单击图像下方的按钮以打开模式。

这是我的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>

* {
    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;
}

我不确定为什么突然之间它不能让我打开模式。

请帮助！

谢谢玛丽

Answer 1

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

也许尝试像这样抓住按钮： document.querySelector（“。headbutton”）;

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

有关 querySelector 的更多信息，请参见this link 并参见this link中的 querySelectorAll

Answer 2

这仅仅是一个简单的原因，而您却忘记了以正确的方式获取 btn 。您想使用 getElementById 来获取按钮，但是页面中没有具有此ID的元素，这是错误的部分！

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

我希望这会有所帮助：）

Answer 3

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

function buttonClick() { modal.style.display = "block"; }

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

<button class="headbutton" onClick="buttonClick()">Preview</button>

正在工作的jsFiddle：https://jsfiddle.net/t29qh6f3/

我也是为了您的span.onclick功能而做的。

这应该使您的模态再次出现。希望这会有所帮助。

简单模式不会在点击时显示

3 个答案: