CODEWITHSUNDEEP
javascriptjquerypopupmodal-dialog
Ryan
Ryan

Reputation: 111

Linking Directly To An Open Modal Window Through a URL?

I don't know much at all about coding so hopefully i worded the question correctly.

What I am trying to do is link a person to a specific modal window on another website. In this example, I will use the Menards weekly ad to show what I would like to do.

I would like to link somebody directly to the weekly flyer page with the modal window already open for a specific product such as the $74.99 5 Shelf Unit, which when selected opens this window (https://i.sstatic.net/ASzuI.png). This is the window that I would like to directly link to somebody.

Is there a way to modify the URL to make this possible? About all I know how to do is how to link to a specific page of the URL which would look like this /main/flyer.html?page=5

One other thing to mention is if you go to the website that provides the ads, Flipp, it does allow you to directly link to the window https://flipp.com/item/175356457-muscle-rack-5shelf-steel-unit

Thanks for any help!

Upvotes: 11

Views: 29704

Answers (4)

Magdiel Ramirez
Magdiel Ramirez

Reputation: 1

Yes, you can catch get param on url , https://www.exampleurl.com/?param=ModalIdShow

// Start Page 
$(function(){
  var param = GetURLParameter('param');
  if(param == 'ModalIdShow'){
    $("#ModalIdShow").modal("show");
  }
});

//Catch param 
function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) 
{
    var sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] == sParam) 
    {
        return sParameterName[1];
    }
}
}

Upvotes: 0

rimba
rimba

Reputation: 383

Yes it is possible with some javascript, it will look for #myModal on the url if it finds it, it will load the modal:

just put this at the end of your page:

$(document).ready(function() {

  if(window.location.href.indexOf('#myModal') != -1) {
    $('#myModal').modal('show');
  }

});

Now just use the following url:

http://www.mywebsite.com/page.html#myModal

*your modal must have an id:

<div class="modal" id="myModal">

Upvotes: 21

Olamigoke Philip
Olamigoke Philip

Reputation: 1137

I believe this should work. Only opens modal (if modal exist) with specified ID in URL

$(document).ready(() => {
    const href = window.location.href
    const modalID = href.split('/').reverse()[0]
    if(modalID){
        $(modalID).modal('show')
    }
  })

Upvotes: 0

gkemperle
gkemperle

Reputation: 43

How about that?

function openModalOnHash() {
  if(window.location.hash) {
    var hash = window.location.hash.substring(1);
    $('#'+hash).modal('show');
  }
}

$(document).ready(function() {
  openModalOnHash()
});

Upvotes: 3

Related Questions