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
Related
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/
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 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'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
}
My goal is to display a non-modal jquery-ui dialog box that will display a please wait message along with a loading animation. This dialog box would display on the page the user is coming from, not proceeding too. I largely have this working already with the code below. However, Safari will not display the the please wait dialog. Firefox and Chrome display dialog and following href. Safari just follows the href, but won't display the dialog.
If I try a preventDefault(); or a return false; in the click event handler, then safari (and all browsers) will display the please wait dialog, but of course it will not follow the href. So I do want the default behavior of going to the clicked href, just while going to the href, I want the dialog to display.
I have even tried to do a click handler and inside do a preventDefault(), then open the dialog and then set window.location or location.href, but still Safari will just follow the href and not display the dialog.
Does anyone have any other ideas?
javascript:
$(document).ready(function() {
// Register the pleaseWaitDialog element as a jquery-ui dialog widget with certain options set
$("#pleaseWaitDialog").dialog({
autoOpen: false,
buttons: {},
open: function(event, ui) { $(".ui-dialog-title, .ui-dialog-titlebar-close").hide(); }, // hide the dialog title bar
resizable: false,
show: {effect: 'fade', duration: 500},
height: 120,
width: 300
});
// When a link to add a meeting is clicked, then display the please wait dialog
$("a.addMeetingLink").click(function(e) {
// But wait 5 seceonds before displaying the please wait dialog
setTimeout(function () {
$("#pleaseWaitDialog").dialog("open");
}, 5000);
});
});
HTML:
Add Meeting
<div id="pleaseWaitDialog">
<div>
<p>Please wait</p>
<img src="/ripplemobile/images/ajax-loader.gif" />
</div>
</div>
A quick point, edit this function:
// When a link to add a meeting is clicked, then display the please wait dialog
$("a.addMeetingLink").click(function(e) {
// ADD
e.preventDefault();
// But wait 5 seceonds before displaying the please wait dialog
setTimeout(function () {
$("#pleaseWaitDialog").dialog("open");
}, 5000);
});
This should solve your current issue.