Modal links not working

Hi again,

I am having a issue with modals and jquery. Below is the modal html code:

<div class="bg-modal-welcome">
    <div class="modal-content-welcome">
        <img class="startpic" src="../img/SG-Register-Start.jpg" alt="">
        <div class="stitle row">
            <div class="col l6 offset-l3">
                <p class="center starttitle newfont2">Velkommen til Study Guider</p>
            </div>
        </div>
        <div class="nextcontainer">
            <p class="nextbutton center white-text">Neste</p>
        </div>
    </div>
</div>

Modal css code:

.bg-modal-welcome{
width:100%;
height: 100vh;
position: fixed;
top: 0;
background-color:rgba(0,0,0, 0.7);
justify-content: center;
align-items: center;
<?php if(isset($_SESSION['username'])) : ?>
    <?php if(isset($_SESSION['username3'])) : ?>
        display: none;
    <?php else : ?>
        display: flex;
    <?php endif; ?>
<?php else : ?>
    display: none;
<?php endif; ?>
}
.modal-content-welcome{
position: relative;
width: 400px;
height: 600px;
background-color: white;
border-radius: 10px;
padding: 5px
}
.startpic{
position: relative;
width: 390px;
height: 590px;
background-color: white;
border-radius: 10px;
}
.starttitle{
position: relative;
color: white;
font-size: 22px;
}
.stitle{
position: relative;
bottom: 23vw;
}
.nextbutton{
font-size: 18px;
}

And finally my jquery code:

document.querySelector('.nextcontainer').addEventListener('click', function () {
            document.querySelector('.bg-modal-welcome').style.display = 'none';
            document.querySelector('.bg-modal-picture').style.display = 'flex';
        });

My problem is that the jquery will not work when the modal is displayed when page loads. I know the code is not wrong though, as it works if the modal is opened with the click of a button on the page. Then everything works how it is. I was wondering what I may be missing or what other approach I need to do if I want it to work like I want.

Additional information of why I have coded it like I have:
This modal is supposed to pop up if the users just registered. I do this by checking if they have uploaded a profile picture by checking if their name is in the profilepicture database. If it cannot find it ($_SESSION[‘username3’]) the modal will load when page opens. This is when the click jquery function is not working. I tested it to work if a button gets it to pop up and it did. Thank you for any help.

Nothing you are doing here is jQuery. That Javascript is entirely vanilla.

So what code do you use to determine if the modal is displayed or not?

Oh my bad, bad with what language is what. And for the question the css dude…

I found a solution that works. Still confused why what I had did not work though.

Perhaps you can share with the class, so that anyone who comes later might benefit from your solution?

1 Like

Well I changed the div containing the button to have a onclick=“function()”. Then the function doing what I wanted. My bad for doing a less efficient method, but should have worked from orginal method.

I’m going to guess your problem was one of delegation, but without a full reading of the code, I wouldn’t be able to pinpoint the original problem.

Good that you found a solution that works though!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.