How to open modal after redirect

Sometimes we need to open a modal on visit page after performing some task on another page after redirection. In that case it will help you to do so. Here we use the localStorage method to store key and value on click anchor tag on one page and get the localStorage value on another page and display the modal on the basis of localStorage value.

Answers 1

  • Show modal using localStorage in javascript 

    <!-- set localStorage item with key openModal and value #addEventModal -->
<!-- index.html -->
<a id="addEventBtn" href="main.html"> Add Event </a>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        $('#addEventBtn').on('click', function(e){
            e.preventDefault();
            localStorage.setItem('openModal', '#addEventModal');
            let href = e.target.href;
            window.location.replace(href);
        });
    })
</script>

<!-- Get the localStorage with getItem method and show modal if it is not null and after that remove item from storage -->
<!-- main.html -->
<div class="modal" id="addEventModal">
   <div class="modal-dialog ">
       <div class="modal-content">
           <div class="modal-header">
              <h4 class="modal-title">Modal title</h4>
               <button type="button" class="close" data-dismiss="modal">&times;</button>
           </div>
          <div class="modal-body">
        <p>Modal body text goes here.</p>
          </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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
var modalId = localStorage.getItem('openModal');
if(modalId != null){
    $(modalId).modal("show"); //use modal with id addEventModal
    localStorage.removeItem('openModal');
}
</script>
    0

    It will help you to set the localStorage with modal id in one page using javascript and will show modal to another page after the redirection and remove the item after showing the modal so that on next visit modal did not show. 

    setItem in one page and show modal, remove localStorage item using removeItem after showing the modal

    • Back to code snippet queries related javascript

Log in to add code snippet
Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Nodejs Php Python Sql Typescript Wordpress
Random Code Snippet Queries: Javascript
Ask Query

Copyright © 2018 - 2022 w3codegenerator.com

All Rights Reserved.

We use cookies to ensure that we give you the best experience on our website.