堆栈内存溢出
  繁体   English   中英

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

[英]Simple Modal won't show on click

 原文  2019-10-22 20:31:11  2   3    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="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
 1  2019-10-22 20:52:14

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

也许尝试像这样抓住按钮： document.querySelector(".headbutton");

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

有关querySelector的更多信息，请参阅此链接，另请参阅此链接以获取querySelectorAll

解决方案2
 0  2019-10-22 20:44:44

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

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

我希望这有帮助：）

解决方案3
 0  2019-10-22 20:45:33

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

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

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

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

工作jsFiddle： https://jsfiddle.net/t29qh6f3/

我为你的跨度做了这个span.onclick function 也是如此。

这应该使您的模态再次出现。 希望这可以帮助。

暂无
暂无

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

相关问题 简单的模态不会显示 Div不会在点击时显示 Bootstrap Modal不会在点击时打开 Bootstrap模式不会在单击时关闭 引导模态在触发后将不会显示 Modal不会在本机反应中显示图像 Bootstrap模式使屏幕变暗，但不会显示 模态文字不会显示 在模态之外单击时，Javascript模态不会关闭 canvas 中不会显示简单图形
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM