How to use the direct link to modal window

Question

I'd like to use the following code:

function popModal() {
   // code to pop up modal dialog
}

var hash = window.location.hash;
if (hash.substring(1) == 'modal1') {
   popModal();
}

How would I use it with the following Modal example:

<a href="#" data-target=".bs-nps-modal" data-toggle="modal">

Are you asking how to open a modal with an anchor link, or with an external URL? — isherwood, Nov 20 '14 at 17:47
example.com/modal?id=modal1 - I was hoping to see something like this that would open the page directly with the popup already open when you get to the page — Steph L, Nov 21 '14 at 14:39

dm4web · Accepted Answer · 2014-11-21T14:59:38.563

0

http://jsfiddle.net/kge5rqv3/4/

var hash = window.location.hash.substring(1);
if (hash == 'modal1') {
     popModal();
}

function popModal()
{
    $('#modal1').modal('show');
}

NEW JS: http://jsfiddle.net/kge5rqv3/7/

var id= getUrlParameter('id');

if (id == 'modal1') {
     popModal();
}

function popModal()
{
    $('#modal1').modal('show');
}


function getUrlParameter(sParam)
{

    var sPageURL = window.location.search.substring(1);    

    //simulate url http://example.com?id=modal1
    //remove when implementing this code
    var sPageURL='id=modal1';

    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

edited Nov 21 '14 at 14:59

answered Nov 20 '14 at 18:17

dm4web

4,642
1
14
20

So, what would be the external URL with this example? – Steph L Nov 21 '14 at 14:14
http://example.com/modal?id=modal1 - I was hoping to see something like this that would open the page directly with the popup open. – Steph L Nov 21 '14 at 14:30
external URL: example.com/#modal1 – dm4web Nov 21 '14 at 14:45
get url parameter: http://stackoverflow.com/questions/19491336/get-url-parameter-jquery – dm4web Nov 21 '14 at 14:50
I must be doing something wrong here. Here is my code: – Steph L Nov 21 '14 at 14:57
- So what happens with the hash - I have an img that triggers the modal on the page. Do I need to add an ID in tag line? – Steph L Nov 21 '14 at 15:06
I got everything working except that when I put the example.com/modal?id=modal1 to appear into an external link. – Steph L Nov 21 '14 at 15:40
Not sure what is causing it not to popup. Here is my link to my test page: [link](http://convention.cpma.ca/npstest2) – Steph L Nov 21 '14 at 15:42
http://convention.cpma.ca/npstest2?id=modal1 - should work no?unless I'm missing something here - but the code looks good. But for some odd reason it isn't popping open the modal when linking directly to the external URL. – Steph L Nov 21 '14 at 15:53
REMOVE: var sPageURL='id=modal1'; – dm4web Nov 21 '14 at 15:53
My bad. I removed the var sPageURL='id=modal1'; per your comment but it still isn't appearing when I put the direct URL:convention.cpma.ca/npstest2?id=modal1 - am I missing something else or is the URL incorrect? – Steph L Nov 21 '14 at 16:06
`$(document).ready(function(){ var id= getUrlParameter('id'); if (id == 'modal1') { popModal(); } })` – dm4web Nov 21 '14 at 16:12
Excellent! It works! Thanks for all your time. Steph – Steph L Nov 21 '14 at 16:19
If I wanted to add say 5 modals and have each of them called modal1, modal2, modal3, modal4 and modal5 what method would I used when calling each one using the code you provide above '$(document).ready(function(){ var id= getUrlParameter('id'); if (id == 'modal1') { popModal(); } })'? – Steph L Nov 21 '14 at 16:43
I got to work doing this:`if (id == 'modal2') { popModal(); } function popModal() { $('#modal2').modal('show'); }` And adding this: `$(document).ready(function() { var id= getUrlParameter('id'); if (id == 'modal2') { popModal(); } })` But I don't think it is a good practice to call each one individually like I'm doing - works but is there a better method? I plan to have 54 of these modals being called. Not sure if this will cause any problems to duplicate the code each time. – Steph L Nov 21 '14 at 16:52

Don F · Answer 2 · 2016-02-24T21:50:23.923

I had some problems with the accepted solution and needed to debug it.

I think this is a simplified implementation.

 function popModal()
{
    $('#modaltopop').modal('show');
}

function getUrlParameter(sParam)
{
    return window.location.search.substring(1);
}

var id= getUrlParameter('link_parameter'); 

if (id == 'link_parameter') {
    popModal();
}


<a href='/?link_parameter'>click me</a>

as long as your link parameter matches the parameter in "getUrlParameter('link_parameter')"

samplurl.com/?link_parameter

How to use the direct link to modal window

2 Answers2