Modal links not working

General Web Dev
1

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.

2

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?

3

Oh my bad, bad with what language is what. And for the question the css dudeā€¦

4

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

7

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

1 Like
8

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.

9

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!

10

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