magnific-popup


how to make browser back close magnific-popup


I have the popup working but sometimes a user clicks the back button on their browser to close the popup.
How can I make the browser back button close a 'magnific-popup' that is already open?
Thanks
After some digging found history.js and then the following
var magnificPopup = null;
jQuery(document).ready(function ($) {
var $img = $(".img-link");
if ($img.length) {
$img.magnificPopup({
type: 'image',
preloader: true,
closeOnContentClick: true,
enableEscapeKey: false,
showCloseBtn: true,
removalDelay: 100,
mainClass: 'mfp-fade',
tClose: '',
callbacks: {
open: function () {
History.Adapter.bind(window, 'statechange', closePopup);
History.pushState({ url: document.location.href }, document.title, "?large");
$(window).on('resize', closePopup);
magnificPopup = this;
},
close: function () {
$(window).unbind('statechange', closePopup)
.off('resize', closePopup);
var State = History.getState();
History.replaceState(null, document.title, State.data["url"]);
magnificPopup = null;
}
}
});
}
});
function closePopup () {
if (magnificPopup != null)
magnificPopup.close();
}
I'm using this solution:
callbacks: {
open: function() {
location.href = location.href.split('#')[0] + "#gal";
}
,close: function() {
if (location.hash) history.go(-1);
}
}
And this code:
$(window).on('hashchange',function() {
if(location.href.indexOf("#gal")<0) {
$.magnificPopup.close();
}
});
So, on gallery open I add #gal hash. When user closes I virtually click back button to remove it. If user clicks back button - everything works fine olso.
This solution does not break back button behavior and does no require any additional plugins.
Comments are welcome.
Just to add to your answer, these are the meaningful lines that I got to work for me.
callbacks:
open: ->
History.pushState({ url: document.location.href }, null, "?dialogOpen")
History.Adapter.bind(window, 'statechange', attemptToCloseDialog)
close: ->
$(window).unbind('statechange', attemptToCloseDialog)
History.replaceState(null, null, History.getState().data['url'])
With attempt being:
attemptToCloseDialog = ->
$.magnificPopup.close() if $.magnificPopup.instance

Related Links

Magnific Popup - Counter in Videogallery
how to manually open and close the popup using Magnific-Popup
How to customize arrows and close button?
no closing “X” with inline content
How to prevent close
Magnific-Popup Loading iframe from non-video players URL
Magnific popup - put arrows inside of an image
magnific closeOnContentClick does not work
How can style popup iframe in Magnific Pop-Up?
Gallery with mixed content types
Title for iframe/video in magnific popup
Magnific Popup: Close floats to the right
Calling magnific-popup on button element instead of an anchor
Implement query.magnific-popup.js in dreamweaver cs5. Syntax error in original code
Magnific-popup event binding to popup content
Magnific Popup - Error when opening a you tube video

Categories

HOME
openlayers
vbscript
gremlin
vmware
objectgears
sd-card
xmpp
tizen-web-app
jgroups
jpeg
datastax-java-driver
azure-media-services
multiple-records
adobe-analytics
node-pdfkit
clearcase-ucm
django-simple-history
windows-7-x64
immutable.js
autoconf
cas
linkerd
semantic-versioning
asset-pipeline
openoffice.org
mozilla
adobe-premiere
serverside-rendering
az-application-insights
ansible-playbook
elasticsearch-plugin
ncalc
businessworks
babel-core
outlook-2013
rainbowtable
osx-mavericks
clean-architecture
integrity
carrot
namecoin
spring-cache
angular-strap
ableton-live
storekit
hover-over
php-parse-error
rtbkit
srand
network-interface
asp.net-dynamic-data
java.util.concurrent
rdtsc
flask-cors
xojo
android-radiobutton
reactfx
html5-notifications
dotnetnuke-5
eclipse-memory-analyzer
seed
spring-validator
smtp-auth
coderush
google-email-migration
runas
osql
netbeans-6.9
zpt
recent-documents
site.master
sortable-tables
modelstate
forums
noscript

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App