Steps of adding popup in LG websites:
- Login LG website by go to: www.examplemun.gov.np/member
- Go to: Structure > Blocks > Add block
- write a block name: example popup notice
- Click on Source in Block body section
- Go to Text format and select Full HTML
- Copy and paste the given html code
- Click here for download popup html code
- Please insert the URL of your banner highlight in red color inside html code.
- Go to Local Level Website (default theme) and select Footer fourth column
- Go to Visibility setting> Pages> select Only the listed pages and type <front> inside the textbox and save block
- Please delete block if not needed
<style type="text/css">
#myModal{margin-top:0px;}
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="bs-example"><!-- Button HTML (to Trigger Modal) --><!-- Modal HTML -->
<div class="modal fade" id="myModal">
<div class="modal-dialog" style="width:90%;">
<div class="modal-content">
<div class="modal-header" style="border: none; padding-bottom:0px;"><button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button></div><div class="modal-body">
<center><img class="img-responsive text-center" src="http://mofaga.gov.np/sites/default/files/2019-09/mofaga-banner-new.jpg" style="width:85%;" /></center>
<iframe __idm_id__="952624129" allow="autoplay" frameborder="no" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/682321424&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" width="100%"></iframe></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
}); setTimeout(function(){
$('#myModal').modal('hide');
},32000);
</script>
NOTE: Please flush the cache and refresh browser.
Video: https://youtu.be/INXzFKcjLMU?si=nDiRKb950AgOCcG2
Thank you and share this content to IT Officer friends.