堆栈内存溢出
  简体   繁体   English

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

[英]Simple Modal won't show on click

 原文  2019-10-22 20:31:11  7   3    javascript/ html/ css/ simplemodal

问题描述

I did have the modal working and showing when I press the button.当我按下按钮时，我确实有模式工作并显示。 However, now (not sure how I've done it) I cannot get the modal box to open.但是，现在（不确定我是如何做到的）我无法打开模式框。

I have my page laid out as an image and then the button below the image to open the modal.我将页面布局为图像，然后单击图像下方的按钮打开模式。

This is my HTML...这是我的 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;
}

I am not sure why all of a sudden it wont let me open the modal.我不知道为什么突然它不会让我打开模态。

Please help!请帮忙！

Thanks Mary谢谢玛丽

3 个解决方案

解决方案1
 1  2019-10-22 20:52:14

As I can see, in JS code you are trying to get the button in a wrong way.正如我所看到的，在 JS 代码中，您试图以错误的方式获取按钮。 getElementById will not work in that case because your button does not have an id attribute getElementById 在这种情况下将不起作用，因为您的按钮没有 id 属性

Maybe try to grab the button like so: document.querySelector(".headbutton");也许尝试像这样抓住按钮： document.querySelector(".headbutton");

Let me know if it solved the issue.让我知道它是否解决了问题。

For more information about querySelector see this link and also see this link for querySelectorAll有关querySelector的更多信息，请参阅此链接，另请参阅此链接以获取querySelectorAll

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

It is just for a simple reason and that is you forget to get btn in the right way.这只是一个简单的原因，那就是您忘记以正确的方式获取btn 。 You want to get your button with getElementById but there is no element with this id in your page and that is the error part!您想使用getElementById获取按钮，但页面中没有具有此 id 的元素，这就是错误部分！

So you can change the class attribute to id or you can get your button with getElementByClassName in your javascript code.因此，您可以将class属性更改为id ，或者您可以在 javascript 代码中使用getElementByClassName获取按钮。

I hope this helps:)我希望这有帮助：）

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

You can change your btn.onclick function to a regular function such as:您可以将 btn.onclick function 更改为常规 function，例如：

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

and call the onclick method in the button tag:并在按钮标签中调用 onclick 方法：

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

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

I did this for your span.onclick function as well.我为你的跨度做了这个span.onclick function 也是如此。

This should make your modal appear again.这应该使您的模态再次出现。 Hope this helps.希望这可以帮助。

暂无
暂无

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

相关问题 简单的模态不会显示 - Simple Modal Won't Show Div不会在点击时显示 - Div won't show on click Bootstrap Modal不会在点击时打开 - Bootstrap Modal won't open on click Bootstrap模式不会在单击时关闭 - Bootstrap modal won't close on click 引导模态在触发后将不会显示 - Bootstrap modal won't show after it is triggered Modal不会在本机反应中显示图像 - Modal won't show the image in react native Bootstrap模式使屏幕变暗，但不会显示 - Bootstrap modal darkens screen but won't show 模态文字不会显示 - Modal body text won't show 在模态之外单击时，Javascript模态不会关闭 - Javascript modal won't close when click outside of modal canvas 中不会显示简单图形 - Simple Graphic won't show in the canvas
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM