Jquery Popup plugin closes when clicked anywhere - javascript

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>

Related

Magnific Popup: How to modify showCloseBtn and closeOnBgClick while open?

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/

How to hide default 'X' close button inside magnific popup?

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.

Magnificent popup inside popup

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

magnific popup ajax with bootstrap 3

When i'm using magnific popup ajax call and bootstrap 3, the close button is not on top right of the modal:
my modal
How to make that like this :
my dream modal
This is my code :
popup = $.magnificPopup.instance;
$('a.change_photo,a.change_password,a.jabatan,a.departemen').click(function(){
popup.open({
items: {src:$(this).attr('url')},
type: 'ajax',
closeOnContentClick:false,
closeOnBgClick:false,
enableEscapeKey:true
});
});
This would be a CSS issue. You can just move the button over. I believe they are just absolutely positioning that button.

Stop multiple Dialog windows being opened

I'm trying to make a ajax call for the partialview of my webpage, then pull title and data from it before putting it in a Dialog window. However when I create the dialog, it opens once correctly and 6 more times as an empty Dialog - just the title bar.
In chrome I can see the partialView contains the HTMLDivElement, and 7 HTMLScriptElements so that accounts for the multiple opens - however if I open the Dialog for just that div element it will not load the scripts (and thus lookups and tabs do not work).
$.ajax(url)
.success(function (partialViewHtml) {
// get page data
$(partialViewHtml).dialog({
title: title,
modal: true,
resizable: true,
draggable: true,
height: sheight,
width: swidth
});
Any help would be greatly appreciated. I've been banging my head on a wall for a while. Thanks.
As you seem to have understood, this is normal because of the 7 elements in the jQuery collection on which you open the dialog.
You should add the script elements separately to the page, using for example
$('body').append(scriptElementHTML);
And then open your dialog on just the div :
$(divHtml).dialog({
Not sure whthere jQuery ui has a method to close all dialogs, but we can do it like this
function createDailog () {
$(".ui-dialog-content").dialog("close"); // close all dialogs
$("<div>fdfdsfdsfdsfds<div>").dialog({
title: "title",
modal: true,
resizable: true,
draggable: true,
height: 200,
width: 200
});
}
or you can put a condition like this
if(!$(".ui-dialog-content:visible").length){
// show dialog
}

Categories