<script>
// utilizing only jquery
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
The provided javascript code is what I used to display the popup on page loading.
<!-- Modal -->
<div class="modal" id="edittemplate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="text-danger fa fa-times"></i></button>
<h3 class="modal-title" id="myModalLabel" style="text-align:center;">
<strong>Design</strong> - Get Started First Step
</h3>
<h4> Play with Design Tools To Make Your Site Look Exactly Your Way!!! </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<strong>Interactive Tutorial</strong>
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse sidebar-navbar-collapse" style="padding-left: 0px; padding-right: 0px;">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Design</a></li>
<li><a href="#">Basic Information</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Review And Finish</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="filter">Template Name</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Lively</option>
<option value="2">Whimsical</option>
<option value="3">Modern</option>
<option value="4">Elegant</option>
</select>
</div>
<div class="form-group">
<label for="filter">Colour Scheme</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Black/Red</option>
<option value="2">Blue/Yellow</option>
<option value="3">Brown/Orange</option>
<option value="4">Green/Black</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="text-right pull-right col-md-3">
<button type="submit" class="btn btn-success"><a href="demotemplateone.html"> Next </a></button>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html" font="Arial">DinersDomain</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"><br>
<li><span class="btn btn-default btn-lg"><a href="#" data-toggle="modal" data-target="#edittemplate">Edit This Template</a></span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
I am seeking assistance in triggering the popup without needing to click on the Edit This Template Button. The goal is to have the popup appear automatically upon page refresh.