如何在页面加载时弹出模式

Question

I'm learning on how to popup modal when a page load. For example when I click on a button in home.html that is linked to comment.html, when comment.html load then modal popup. But if I navigate to comment.html without clicking on the button then modal will not popup. Let modal only popup when I click on the button.

home.html

<!-- Another button that linked to comment without mod data-target -->
# I do not want Modal to popup in comment.html when I click on this button
<a href="{% url 'site:comment' %}">Comment</a>

<!-- Button trigger modal -->
# I want modal to popup in comment.html when I click on this button
<a href="{% url 'site:comment' %}" data-toggle="modal" data-target="#basicExampleModal">
Launch Modal in Comment
</a>

comment.html

<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
    ...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Answer 1

$(document).ready(function(){  
  if(localStorage.getItem('popState') != 'shown'){
    $("#basicExampleModal").delay(2000).fadeIn();
    localStorage.setItem('popState','shown')
  }
   $('#basicExampleModal').modal('show');
    }); 

The above code will create a popup Model automatically. Hope you find it useful.

Answer 2

In short:

• create a local storage data item (for example item name being: showModalInCommentPage) before navigating to the comments page
• on loading comments page check if that local storage data item (showModalInCommentPage) exists
• if exists load the modal and remove the local storage data item (showModalInCommentPage)

in home templates file

<!-- If modal should not be shown -->
<a href="{% url 'site:comment' %}">Comment</a>

<!-- If modal should be shown : create local storage item on clicking the a tag -->
<a href="{% url 'site:comment' %}" onclick="localStorage.setItem('showModalInCommentPage', '1')">Launch Modal in Comment</a>

in comments template file

<script>
    $(document).ready( function() {
        var showmodal = localStorage.getItem('showModalInCommentPage');
        if (showmodal == '1') {
            $('#basicExampleModal').modal('show');
            localStorage.removeItem('showModalInCommentPage');
        }
    });
</script>