Is there a way to edit an open instance of a magnific popup? In one state I want the popup to be closable, and in another state I want to block user from closing. It seems these options are only available for intilialisation:
$('.target-div').magnificPopup({
delegate: 'a',
type: "inline",
closeOnBgClick: true,
showCloseBtn: true,
gallery: {
enabled: false
}})
Then, while the popup is open, I want to block accidental closing and take away the X button.
$('.target-div').magnificPopup({
delegate: 'a',
type: "inline",
closeOnBgClick: false,
showCloseBtn: false,
gallery: {
enabled: false
}})
MagnificPopup stores a single instance in the jQuery var ($.magnificPopup), which controls the popup's behavior in the DOM. It's actually really easy to update the background click behavior by changing a single setting.
$.magnificPopup.instance.st.closeOnBgClick = false
Internally, MFP uses $.detach() and $.append() to control the presence of the close button. To remove it, we can duplicate the way it works in _close() by calling:
$.magnificPopup.instance.currTemplate.closeBtn.detach()
Re-adding it is a bit more difficult because the library uses a private function called _getCloseBtn() to generate the element. Fortunately we can just re-append it from the same place we removed it.
$.magnificPopup.instance.content.append($.magnificPopup.instance.currTemplate.closeBtn)
Source: https://github.com/dimsemenov/Magnific-Popup/blob/c8f6b8549ebff2306c5f1179c9d112308185fe2c/dist/jquery.magnific-popup.js
Demo page used for testing: https://dimsemenov.com/plugins/magnific-popup/
Related
I have used Magnific-popup in my jsp to display few messages to the user.
The code I have used to open magnific popup is as below:
$.magnificPopup.open({
items: {
type: 'inline',
src: '#idOfSomeDivInPage'
},
focus: '#someButtonId',
closeOnBgClick: false,
enableEscapeKey: false
}, 0);
Is there a way to delete/hide the 'X' button present on top right top corner of magnific popup by using jquery and css?
You could use showCloseBtn config as mentioned here in doc.
showCloseBtn
Controls whether the close button will be displayed or not.
$.magnificPopup.open({
items: {
type: 'inline',
src: '#idOfSomeDivInPage'
},
focus: '#someButtonId',
closeOnBgClick: false,
enableEscapeKey: false,
showCloseBtn:false
}, 0);
Please check here with working codepen
As a workaround.
Please add following line in your code where you create your popup.
$('.mfp-close').css('display','none');
Hope this solution works.
When I set up my test document to use an 'inline' Magnific Popup I click the link/button, and the URL of the page changes, but nothing actually appears.
I've copied and pasted directly from the original demo, I've included the jQuery library before the after Magnific's .js. I've tried swapping initialization codes. I've honestly lost track. I also can't get my debugger in Chrome to open properly, but what I gathered was that I was missing a closing } but when I added it things only broke further.
I also made a JSFiddle despite not really knowing how to use it: https://jsfiddle.net/3b15w3ek/6/
$(document).ready(function() {
// Example 1: From an element in DOM
$('.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.
});
I checked the fiddle and found that URL for jQuery1.9.1 was wrong and corrected it. See the updated fiddle:
https://jsfiddle.net/3b15w3ek/7/
And the updated code is:
$(document).ready(function() {
// Example 1: From an element in DOM
$('.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.
});
});
You didn't close the function (missing last });):
$(document).ready(function() {
// Example 1: From an element in DOM
$('.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 order this snippet to work in JSFiddle, you also need to set "Framework & Extensions" = "jQuery 1.9.1" (or later) in Javascript settings. Otherwise $ symbol is not found in Magnific gallery...
In my project I'm using magnific popup. I need to actualize 2 popups (one inside another) with different options. First with only closeOnBgClick and second with both: closeOnBgClick and closeOnContentClick.
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
closeOnBgClick: true
});
$('.popup-content-click').magnificPopup({
alignTop: true,
type: 'inline',
preloader: false,
modal: true,
closeOnBgClick: true,
closeOnContentClick:true
});
Here you can see what I mean: http://jsfiddle.net/pamjaranka/p1u2xdun/3/
The problem is, the second pop up is ignored it's options and used the same options as the first pop up. For clarity I added 'alignTop: true', which is also doesn't work.
Is there any possibility to fix it?
Thanks for help.
appears that once the popup is opened you need to close it and then call the second pop-up open method, otherwise the settings from the first one precede, thus, the overlay always closes the pop-up. Here is a brief change I made in your JS code:
// Assign on click behaviour to the button in the first pop-up
$('.popup-content-click').on('click', openPopup);
// on click handler
function openPopup(){
//Closing the already opened pop-up
$.magnificPopup.close();
//wait a bit then open the new pop-up
setTimeout(function(){
$.magnificPopup.open({
items:{src: '#result-again'},
type: 'inline',
closeOnBgClick: false,
closeOnContentClick:true
});
}, 100);
}
Here is the jsfiddle for that
When I click anywhere on the popup it closes, but its not supposed to do that, it supposed to close only when I click on the X button. Im using Magnific Popup Plugin. The author's demo works fine, but when I implement the plugin on my site, it doesn't work like the demo. This is causing problems for me because If I try to click on any link in the popup, it closes the popup instead of opening the link.
Any ideas what's causing it? Code below:
<script type="text/javascript">
$(document).ready(function() {
$('.simple-ajax-popup-align-top').magnificPopup({
type: 'ajax',
alignTop: true,
overflowY: 'scroll' // as we know that popup content is tall we set scroll overflow by default to avoid jump
});
$('.simple-ajax-popup').magnificPopup({
type: 'ajax'
});
});
</script>
<a class="simple-ajax-popup-align-top ajax-gal" href="test.html">test</a>
Author's Demo Site: http://dimsemenov.com/plugins/magnific-popup/
There are several options which control closing behaviour.
closeOnContentClick: false, // if true, closes the popup if you click on it
closeOnBgClick: true, // if true, closes the popup if you click on the grey stuff around it
showCloseBtn: false, //if true, shows a closing button top right.
You can learn more about these options here: http://dimsemenov.com/plugins/magnific-popup/documentation.html#options
Since you are a lazy programmer:
<script type="text/javascript">
$(document).ready(function() {
$('.simple-ajax-popup-align-top').magnificPopup({
type: 'ajax',
alignTop: true,
closeOnContentClick: false,
closeOnBgClick: true,
showCloseBtn: false,
overflowY: 'scroll' // as we know that popup content is tall we set scroll overflow by default to avoid jump
});
$('.simple-ajax-popup').magnificPopup({
type: 'ajax',
closeOnContentClick: false,
closeOnBgClick: true,
showCloseBtn: false
});
});
</script>
I am trying to disable close on click when clicking the overlay behind the edit form Modal that opens when I edit a row, but I dont know how I have to do it. I were trying something like:
editOptions: {
url: 'foo/edit.html',
mtype: 'PUT',
//some other options
closeAfterEdit: true,
reloadAfterSubmit: true,
onClose: function() {
alert('Hi ^_^');
}
}
But this only triggers if I click at 'X' button. If I click at overlay (out of modal) it closes the modal and that alert never triggers. What I want is to disable that closing function when I click out of modal or remove that overlay.
Thanks.
It's interesting problem. onClose callback will be not called if one clicks on the overlay (if one clicks out of the modal dialog) and the dialog will be closed.
It's funny, but jqModal.js already has the option which would be perfect to implement your requiremens. It's closeoverlay option of $.fn.jqm (see the line). The problem is that jqGrid don't have any public property which allows to set the option. If you just modify jquery.jqGrid.src.js the closeoverlay : true to closeoverlay : false (it corresponds changing closeoverlay:!0 to closeoverlay:!1 in jquery.jqGrid.min.js) then you will have the behavior which you need.
The problem is that I don't see any simple way to realize your requirements without modification of the code jqGrid.
UPDATED: I analysed the code of jqModal.js module one more time and I'v found simple way without changing the source code of jqGrid. The analyse is difficult because the module exist only in minimized form. So it's difficult to read the code.
The solution: you should include the following line which changes defaults of jqModal.js module:
$.jqm.params.closeoverlay = false;
Description: the lines of jqModal.js module initialize $.jqm as
$.jqm = {
hash: {},
open: function (s,t) { ... },
close: function (s) { ... },
params: {}
};
So everywhere after you includes jquery.jqGrid.min.js you have $.jqm.params as empty object. It can be used to provide default values of parameters of jqModal.js (which are not directly specified in the list of parameters of $.jqm). So you can include $.jqm.params.closeoverlay = false; somewhere after jquery.jqGrid.min.js (or jquery.jqGrid.src.js) to deny closing of jqGrid dialog on clicking on the overlay.