I have a div with contents to be displayed as popup, however, I am not sure how to open it in a popup using magnific popup script automatically, just like as an alert.
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
focus: '#zipCode',
modal: true
});
});
when I fired the div with class "popup-modal" using click event, I am seeing screen with gray color having value rendered as true.
Related
I have a page with several buttons that all open the same modal using Magnific Popup. However I need to customize the popup for each button according to the calling button's data- attributes.
So I need a way to call a function when the popup pops :-) and have access to the calling button.
The Magnific popup initialization is part of the FE's js file, and I'm working in the module's js file. So I'm trying to minimize changes to the FE's js!
Is this possible? How can I achieve this?
CHECK UPDATE BELOW:
This is what I did:
Did not touch the FE's js which initialized any .my-modal class
I edited these button's classes from .my-modal into .my-custom-modal (for example)
Initialized magnificpopup on .my-custom-modal and added the following to trigger an event before opening the modal:
$('.my-custom-modal').magnificPopup({
type: 'inline',
midClick: true
}).on('mfpBeforeOpen', function () {
// 'this' is the current button that triggered the modal
console.log(this);
});
UPDATE
The above works but the 'this' var wasn't returning the actual button but seems like the first button in the page.
The below should work correctly:
$('.my-custom-modal').magnificPopup({
type: 'inline',
midClick: true,
callbacks: {
open: function () {
var mp = $.magnificPopup.instance,
btn = $(mp.currItem.el[0]);
//btn is the actual button being clicked
console.log(btn);
}
}
});
Hi it is very simple question, but I didn't find the answer fit in my situation.
In my jQuery dialog I have buttons which is update and close. User click 'update button' then on code behind I need to update in database then close.
when user click the close button then I close the dialog. the dialog is load aspx page. I have two problems.
The problem is if user click close button which run javascript window.close(). It will pop up the windows "Do you want to close window...."
How can I refresh the parent page and close the dialog by clicking the 'update' button.
there is the code to load the dialog:
function openDialog(url, name, width, height) {
$("#dialog-box").load(url).dialog({
autoOpen: false,
resizable: true,
height: 425,
width: 600,
modal: true
});
$('#dialog-box').dialog('open');
return false;
}
I tried to use $("#dialog-box").dialog("close"); in my function which is called in code behind. but it show the error.
there is my function
function RefreshParentAndClose() {
$("#dialog-box").dialog("close");
}
there is the code I load the dialog on parent page
<div id="dialog-box" title=" "></div>
<td width="33%" align="right"><asp:button id="btnSelect" runat="server" causesvalidation="False" text="Select Locations"
OnClientClick="javascript:return openDialog('popLocation.aspx','select',600,500);" /></td>
Use below code for close
$("#dialog-box").dialog( "close" );
and to refrsh on close use
$("#dialog-box").dialog({
close: function( event, ui ) {
window.location.reload();
}
});
1) You could close the dialog by invoking its close() method:
function OnCloseClick() {
$("#dialog-box").dialog("close");
}
2) You just need to refresh the main page. On the subsequent load the dialog should not be opened (in case you do not load it automatically). More information about the method's parameter used below could be read from this answer on StackOverflow.
function OnUpdateClick() {
window.opener.location.reload(false);
}
I am using fancybox to show a page (say child.htm) within another page(parent.htm).
I know how to automatically reload the parent page after closing the iFrame:
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
However, my requirement is more specific. I need to close the iframe and then reload the parent page (parent.htm) only when an user clicks on a button (e.g : clicking on button "OK" present in child.htm).
The problem with the code snippet that I'm having is that the parent page is getting reloaded even when I click on the close icon or when I click anywhere outside the frame. This is something that I want to restrict. My agenda is to cause page refresh only on button click.
I would try something like this:
$('.fancybox').fancybox({
href : 'child.html',
type : 'iframe',
afterShow: function(){
$('.fancybox-iframe').contents().find('#button').click(function(){
// do something
...
// reload parent window and close fancybox
window.parent.location.reload();
window.parent.$.fancybox.close();
});
}
});
I have a main page that has a popup (please see window number 1 in the image I added). In this popup, there is a button of skip. if the user presses skip button, the popup is gone (and then, the user sees the main page) (window number 3). but if the user doesn't press on the popup, but the main window, the color of the main window becomes to a gray color (window number 2). if I press the main window about 3 times, then the color will be changed into a white color (window number 3).
I think I have to hide my popup if the user presses the main window instead of the popup.
how can I fix it?
my popup is called: class="popup_window". the X and the SKIP buttons are called: btn_x and btn_skip.
any help appreciated!
UPDATE this is my welcome_msg java script code:
// welcome message
$("#welcome_dialog").lightbox_me({
centered: true,
onLoad: function() {
//alert("Page is loaded");
}
});
I've just looked at the lightbox_me plugin website and on the homepage it lists the possible options you can use. You need to add the following to your code: "closeClick : true".
So the code you posted above would look like this:
$("#welcome_dialog").lightbox_me({
centered: true,
closeClick: true,
onLoad: function() {
//alert("Page is loaded");
}
});
As described on the site:
CloseClick true Whether or not to close the lightbox with the user clicks the overlay.
Source: http://buckwilson.me/lightboxme/
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.