Magnific Popup on Page Load

Question

I'm trying to make a Magnific Popup automatically appear on page load.

I have it so it works when I click a button (which narrows down some possible errors), but I still can't get it to appear on load. I've tried this and this, but neither seems to be working.

<script>
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    });
    $.magnificPopup.open({
        type: 'inline'
    });
</script>

Can anyone help me get this straightened out? Ideally it would open automatically and when the button was clicked.

ADDITIONAL INFO

Here's the html/erb for the button that works:

<p><a href="#test-popup" class="open-popup-link btn btn-ghost hvr-grow" style="margin-top: 40px">Quick Man Check</a></p>

And here's the content:

<div id="test-popup" class="white-popup mfp-hide">
    <div class="">
      <h1>Answer the following question to gain entry:</h1>
      <% @random_partial = 'man_tests/test' + rand(0).round.to_s %>
      <%= render partial: @random_partial %>
    </div> <!-- hover-well -->
</div> <!-- white-popup mfp-hide -->

Clarification: The popup has a submit button for form data, which causes problems with it appearing once but only once.

Update: As suggested, both this:

$.magnificPopup.open({
  items: {
      src: '#test-popup',
      type: 'inline'
  }
});

And this:

$('.open-popup-link').magnificPopup('open');

Make it open on load, but it then continues doing so ad nauseum, never allowing the index page to be viewed.

@user2182349, it can't be the type, because it works when the link is clicked. Only the second iteration doesn't work. — Liz, Oct 05 '16 at 01:06
You need the second parameter - which indicates which pop up to open. Add a comma and a zero right before the closing parenthesis on the second call. — user2182349, Oct 05 '16 at 01:19
@user2182349, I changed the second one to `$.magnificPopup.open({ type: 'inline' }, 0);` and it still doesn't appear on load. — Liz, Oct 05 '16 at 01:21
have you tried `$('.open-popup-link').magnificPopup('open');`? — FabioG, Oct 12 '16 at 16:37
@FabioG, that got it to appear! However, it reappears whenever it is closed, rendering my homepage unreachable. I need it to only happen when the page first loads... — Liz, Oct 12 '16 at 16:39
@FabioG, the content has a `submit` button, which I assume makes the index page reload, as this problem doesn't occur if you just X out of the popup, if that helps... — Liz, Oct 12 '16 at 16:41
Just for sanity sake, can you post a [jsfiddle](http://jsfiddle.net) with the current code that you have and which doesn't work? I'd love to see a working example (with the fault in) as it's easier to debug. — Joseph Callaars, Oct 12 '16 at 17:31

aasiph · Accepted Answer · 2016-10-13T05:40:12.603

1

$.magnificPopup.open({
  items: {
      src: '#test-popup',
      type: 'inline'
  }
});

If you can give link to check the problem it will be good enough.

Try this code below

<script>
function getPathFromUrl(url) {
  return url.split(/[?#]/)[0];
}

if(getPathFromUrl(document.referrer) != getPathFromUrl(document.URL){
$.magnificPopup.open({
      items: {
          src: '#test-popup',
          type: 'inline'
      }
    });
}
</script>

Below is solution for time based popup

var now, time, lastTimePopup, repeatAfter;
    now = new Date();
    time = now.getTime();
    repeatAfter = 2 * 60 * 1000;//First number 2 is after number of minutes the popup should be showed.

    if (localStorage.getItem('lastTimePopup') !== null) {
        lastTimePopup = localStorage.getItem('lastTimePopup');
    }

    if (((now - lastTimePopup) >= repeatAfter) || !lastTimePopup) {
        $.magnificPopup.open({
          items: { src: '#test-popup' },
          type: 'inline'
        }, 0);

        localStorage.setItem('lastTimePopup', now.getTime());
    }

edited Oct 13 '16 at 05:40

answered Oct 12 '16 at 17:58

aasiph

197
1
6

This works in that it brings it up immediately upon page load, but each time I hit submit it reloads the homepage, thereby bringing up a new popup. – Liz Oct 12 '16 at 18:01
Oh so you dont want the popup to appear again. – aasiph Oct 12 '16 at 18:04
The popup should happen every time the user navigates to the index page. If they clicked the index link it would come up every time. However, once they click the submit button in the popup, they need to be able to see the index page popup-free. – Liz Oct 12 '16 at 18:05
Now it doesn't show up at all, unfortunately. I see what you're trying to do though. Would it be easier to somehow limit the time between popups? (i.e. if it has popped up in the last 2 minutes, it won't do it again, or something like that?) – Liz Oct 12 '16 at 19:32
The time based one is a thing of beauty and WORKS! Thank you! – Liz Oct 13 '16 at 14:27

Gerfried · Answer 2 · 2016-10-12T17:52:58.023

0

In the documentation I found this:

// Open directly via API
$.magnificPopup.open({
  items: {
    src: '<div class="white-popup">Dynamically created popup</div>', // can be a HTML string, jQuery object, or CSS selector
    type: 'inline'
  }
});

You should wrap this in a $(document).ready(function() {...});

I have created a working Plunker sample for you: https://plnkr.co/edit/h1fmGbJg5cYONfwMQerF

Another solution might be to add a hidden element (e.g. a button) and click it via Javascript: $('.thebutton')[0].click();

edited Oct 12 '16 at 17:52

answered Oct 12 '16 at 17:41

Gerfried

6,193
28
47

Thank you for the Plunker. I tried the one from the API, but to no avail. I already have one working button that brings up the popup (successfully), so like the idea of clicking the button with javascript, but wouldn't that have the same issue where it comes up again and again (because the submit button in the popup makes the page reload, which would create another popup)? – Liz Oct 12 '16 at 18:03
@Liz: a html element "button" does not necessarily submit the page. Just use a button of type="button" - this will not submit the form and you can bind your JS on it. – Gerfried Oct 13 '16 at 15:51

Magnific Popup on Page Load

2 Answers2