Простой модал не будет отображаться при клике - PullRequest
Новая
       49

Простой модал не будет отображаться при клике

0 голосов
/ 22 октября 2019

Модал работал и показывал, когда я нажимал кнопку. Однако теперь (не знаю, как я это сделал) я не могу открыть модальное окно.

У меня есть страница, выложенная в виде изображения, а затем кнопка под изображением, чтобы открыть модальное окно.

Это мой 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;
}

Я не уверен, почему вдруг он не позволяет мне открыть модал.

Пожалуйста, помогите!

Спасибо, Мэри

Ответы [ 3 ]

1 голос
/ 22 октября 2019

Как я вижу, в коде JS вы пытаетесь получить кнопку неправильно. getElementById не будет работать в этом случае, потому что ваша кнопка не имеет атрибута id

Возможно, попробуйте получить кнопку следующим образом: document.querySelector (". headbutton");

Дайте мне знатьесли это решило проблему.

Для получения дополнительной информации о querySelector см. эту ссылку , а также см. эту ссылку для querySelectorAll

0 голосов
/ 22 октября 2019

Вы можете изменить функцию btn.onclick на обычную функцию, такую ​​как:

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

и вызвать метод onclick в теге кнопки:

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

Работа jsFiddle: https://jsfiddle.net/t29qh6f3/

Я сделал это и для вашей функции span.onclick.

Это должно заставить ваш модал появиться снова. Надеюсь, это поможет.

0 голосов
/ 22 октября 2019

Это просто по простой причине, и вы забыли правильно получить btn . Вы хотите получить свою кнопку с помощью getElementById , но на вашей странице нет элемента с этим идентификатором, что является ошибкой!

Таким образом, вы можете изменить класс атрибут id , или вы можете получить свою кнопку с getElementByClassName в вашем коде JavaScript.

Надеюсь, это поможет:)

...