Skip to main content
aorden
Participant
Jan 8, 2022 12:36 AM UTC
Question

Popup Covid Notification page

I want to add a delayed popup notification to my homepage that will display our policies regarding covid.

I can't seem to get this right ....

any help would be greatly appreciated.

Using: Dreamweaver 21.2

Site is using bootstrap templates.

Thanks in advance...

Adam

 

You need to ask program questions in the forum for the program you are using
To ask in the forum for your program please start at https://community.adobe.com/
Moving from Using the Community (which is about the forums) to the correct forum... Mod

This topic is closed to new replies. Start a new post to keep the conversation going.

4 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
Jan 11, 2022 7:37 PM UTC

So did either of these solutions help you? 

 

Translate
Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
Jan 8, 2022 7:31 PM UTC

Invoke a Bootstrap Modal window on page load.  Bootstrap 4.5.

 

 

Working Example:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Modal on Page Load</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>
<!--Begin Modal Content-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-danger">Covid Policies Here</h3> 
<button type="button" class="close text-primary" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non eos iusto odio ipsam dolorem enim! Ducimus maiores dolores libero minus tempore. Nulla id culpa voluptate deleniti quae suscipit placeat quas!</p>
<button type="button" class="close text-primary" data-dismiss="modal">Close &times;</button>
</div>
</div>
</div>
</div> <!--/end Modal-->

<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!--Invoke Modal on Page Load-->
<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</body>
</html>

 

Translate
Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
Jan 8, 2022 10:05 PM UTC

To delay the modal window for 10 seconds, add a Timeout function as shown below.  Adjust value in milliseconds as required. Lower value = shorter delay.

 

<script>
$(document).ready(function(){
setTimeout(function(){
$('#myModal').modal('show');
}, 10000);
});
</script>

 

Translate
Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    Jan 8, 2022 2:55 AM UTC

    This may help:

    https://getbootstrap.com/docs/4.2/components/toasts/

    Translate
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices