```
<script>
  // you can use just jquery for this
  $(document).ready(function(){
     $('#overlay-back').fadeIn(500,function(){
        $('#popup').show();
     });

     $(".close-image").on('click', function() {
        $('#popup').hide();
        $('#overlay-back').fadeOut(500);
     });
  });

```

The above is the javascript i have used. I need to get 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">                           
                </div> -->                      
                <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>

```

Can someone help me how to get the popup instead of clicking on Edit This Template Button. On page refresh popup should come.