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

How to adjust video size magnific popup
$.magnificPopup.open() callbacks is not working
How do i setup magnific-popup
magnific-popup - re-initiate on ajax content
Magnific-popup cancels all requests on open
Magnific Popup fails to work with multiple galleries on a page
magnific-popup open in parent when calling from iframe
Magnific popup iframe closeOnBgClick does not work
Magnific Popup Text Links
Magnific popup - undefined is not a function when parsing markup
Adding onclose method in magnificPopup (that autoloads on pageload)
Popup does not work fine with final tiles grid gallery
Magnific Popup - Enable zoom animation when using $.magnificPopup.open
Magnific Popup appears below page on mobile
Magnific-popup - Source (not showing up again) after closing Popup
Magnific Popup plugin: Preloader not working on iframe

Categories

HOME
xamarin
multithreading
gerrit
openmp
comparison
at-command
rsync
google-oauth
rdf
sqlite3
v8
slurm
gitpitch
session-variables
communication
metatrader4
node-pdfkit
volttron
timeout
orchardcms
saxon
oracle-coherence
kryo
facebook-instant-articles
wkwebview
rundeck
user-interaction
phpfox
greendao
dbclient
jaxb2
quote
srcset
google-sites-2016
usbserial
vsts-build-task
asset-pipeline
jmonkeyengine
streamreader
bootstrapper
preconditions
node-gyp
password-encryption
parentheses
appcompat
chain-builder
pubmed
errordocument
blogengine.net
datastax-startup
media-player
angular-strap
medium.com
setuptools
multiple-regression
sigabrt
livequery
goose
wso2cloud
comobject
jqgrid-formatter
apache-commons-fileupload
processmodel
code-access-security
poller
srs
fmod
floating-point-precision
gridfs
soundtouch
ora-00911
mylyn
interface-orientation
itmstransporter
libstdc++
isnullorempty
dsn
hosts-file
subscript
nsdatecomponents
ecl
suppress
jquery-ui-droppable
filtered-index
javap
virtual-functions
uimenucontroller
swing-app-framework
putchar
mediarss
private-members
3gp
document-conversion

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