CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Petar Brković
Petar Brković

Reputation: 111

Is it possible to link button to go to another page and open modal on it?

I was wondering if it was possible to link a button to a modal on another page, so basically when you click a button, another page loads (in new tab with target 0) and with modal opened on that page?

Upvotes: 0

Views: 955

Answers (1)

Tobias Glaus
Tobias Glaus

Reputation: 3628

This is a very simple example of doing that using jQuery:

On the page with the button you need a normal link and an attribute data-modal="modal-id" with the id of your modal.

page1.html:

    <a class="open-modal" href="page2.html" data-modal="modal-ipsum" target="_blank">
      <button>Open Modal</button>
    </a>

On the page which opens when you click the button, you need the modal with the same id you set before in the data-modal attribute:

page2.html:

    <div class="modal" id="modal-ipsum">
      <h2>This is Modal Ipsum</h2>
    </div>

Then in your JS file: 

main.js:

    $(".open-modal").click(function(e){
      e.preventDefault();

      var modal = $(this).data("modal");
      var page = $(this).attr("href");

      localStorage.setItem('modal', modal);

      window.location.href = page;
    });

    if ("modal" in localStorage) {
      var modal = localStorage.getItem('modal');

      $("#" + modal).fadeIn();
    }

What that does is when you click a link with class open-modal it sets a key with the value modal-ipsum in your localStorage and then goes to the linked page.

On your 2nd page, you need to have the JS file linked aswell. When the document is ready, it checks if the localStorage contains an item called modal. If that's the case, it fades in the modal with the id #modal-ipsum.

code is not tested

This is just some help to get you started. Next time try something out and then ask for help on SO with your code, so we can help you more specifically.

Upvotes: 1

Related Questions