0

I need to put a popup onto a website to tell users that there is a new version of the site.

I've created a Bootstrap modal that works on click, but using jQuery, is it possible to make it appear after a few seconds once the page has loaded? And once closed to not appear again?

Please see my code below, and jsfiddle 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle"><img src="https://dcnetworks.ie/wp/wp-content/uploads/2017/11/placeholder-logo-2-300x167.png" style="width: 300px;"/></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="font-size: 35px;">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h2>Lorem lorem lorem <br />
                   Ipum ipsum</h2>
            </div>
            <div class="modal-footer popup-buttons-wrap">
                <button type="button" class="btn visit-button"><h3>Visit Site</h3></button>
                <button type="button" class="btn close-button" data-dismiss="modal"><h3>Close</h3></button>
            </div>
        </div>
    </div>


.modal-title{
    text-align: center;
}
.modal-content{
    background-color: #063242;
    height: 500px;
    width: 750px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.modal-body{
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
}
.modal-body h2{
    width: 60%;
    border-left: 3px solid #E52149;
    border-right: 3px solid #ADD13D;
    font-weight: 400;
}
.modal-header{
    border-bottom: 0;
}
.modal-footer{
    border-top: 0;
    text-align: center;
}
.modal-header .close{
    color: #fff;
    position: absolute;
    top: 25px;
    right: 25px;
}
.visit-button{
    border: 3px solid #E52149;
    background-color: transparent;
    margin-right: 55px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.visit-button h3{
    margin: 0;
    color: #fff;
    font-weight: 400;
    padding: 3px;
}
.visit-button:hover{
    background-color: #E52149;
    color: #fff;
}
.close-button{
    border: 3px solid #ADD13D;
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.close-button h3{
    margin: 0;
    color: #fff;
    font-weight: 400;
    padding: 3px;
}
.close-button:hover{
    background-color: #ADD13D;
    color: #fff;
}
James
  • 55
  • 1
  • 9
  • is your question "without using jquery"...? also, as it is now, your modal is loaded when I open the fiddle. – john_h Jun 12 '18 at 15:46
  • No, I'm trying to use jQuery to make it work. I'm not sure why it's open on jsfiddle, on my site it remains closed until I click on the button – James Jun 12 '18 at 15:51
  • it sounds like you want to fire some code when the page is loaded... so you'll want to check out the jquery "ready" function, there is some information on running that here: https://stackoverflow.com/questions/8840044/trigger-a-button-on-page-load – john_h Jun 12 '18 at 15:55
  • Thanks for the link, that sounds like what I want. I've tried $(document).ready(function() { $('#exampleModalCenter').click(); }); but doesn't seem to be working – James Jun 12 '18 at 16:00

1 Answers1

0

Try to do this:

if (typeof $.cookie('yourCookie') === 'undefined')
  //Create yourCookie and display your modal
else
  //Go on your website
Romain Fontaine
  • 11
  • 3