
How to open modal after redirect
How to open modal after redirect
In this article, we will see how to solve "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.-
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">×</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>
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
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
Don't forget to share this article! Help us spread the word by clicking the share button below.
We appreciate your support and are committed to providing you valuable and informative content.
We are thankful for your never ending support.
Random Code Snippet Queries: Javascript
- Uncaught TypeError: Cannot read property 'addEventListener' of undefined
- Trim the leading and trailing comma from string in Javascript
- How to display an image in Javascript onclick
- How to Set data to localstorage in javascript
- How to check file is an image in javascript using filename
- How to push string in an array in Javascript
- Short-circuits conditionals
- How to echo array in Javascript
- How to preview a word document in HTML using javascript
- How to remove duplicate values from array in javascript
- Generate 6 digit random number in javascript
- Javascript get data-id attribute value
- Custom slider js
- Javascript to print Fibonacci series upto 15 Observations
- How to crop multiple images with cropper js
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- How to make entire Div clickable in javascript
- ReferenceError: $ is not defined
- ReferenceError: Cannot access 'myFunction' before initialization
- Uncaught TypeError: Assignment to constant variable
- Json stringify
- How to get file extension using javascript/jquery
- Concat variable with string in javascript
- Check if value exists in array javascript
- How to preview video before uploading in javascript