Skip to main content
A
aorden
Participant
January 8, 2022
Question

Popup Covid Notification page

  • January 8, 2022
  • 3 replies
  • 179 views

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 has been closed for replies.

3 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 11, 2022

So did either of these solutions help you? 

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 8, 2022

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>

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 8, 2022

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>

 

Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    January 8, 2022

    This may help:

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

    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