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

Question

我正在学习如何在页面加载时弹出模式。例如，当我单击 home.html 中链接到comment.html 的按钮时，当comment.html 加载时会弹出模态。但是，如果我导航到 comment.html 而不单击按钮，则不会弹出模式。仅当我单击按钮时才弹出模式。

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');
    }); 

上面的代码会自动创建一个弹出模型！希望对您有用。

Answer 2

简而言之：

• 在导航到 cmets 页面之前创建一个本地存储数据项（例如，项名称为：showModalInCommentPage）
• 在加载 cmets 页面时检查本地存储数据项 (showModalInCommentPage) 是否存在
• 如果存在加载模态并删除本地存储数据项（showModalInCommentPage）

在主页模板文件中

<!-- 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>

在 cmets 模板文件中

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