jQuery popup window timing - javascript

So I add a jQuery popup to a submit button in ASP.net MVC4.
$('#submitrequestbutton').click(function (e) {
$('#popup').bPopup();
});
That works like a charm. However, it goes away after a millisecond. How do I keep it open until the user clicks close, so it doesn't post back before the user has a chance to read the contents?
I'm using http://dinbror.dk/bpopup/
EDIT
Alternatively, if I could just keep the popup open for a few seconds, that would work too.

Hope this works for you
$('#submitrequestbutton').click(function (e) {
$('#popup').bPopup({
easing: 'easeOutBack', //uses jQuery easing plugin
speed: 450,
});
});
Check out this link for more info http://dinbror.dk/bpopup/

Related

Opening one modal from another using the meteor way

How exactly do I open one modal from another modal in meteor? I'm using bootstrap-3-modal package
When I try clicking on the confirm button of one modal, it must close that modal and open a new modal. Somehow,it doesn't seem to work. Here's what I have:
Template.addMoreTemplateConfirmationModal.events({
'click #confirmMorePGInstance'(event){ // this is the confirm button on addMoreTemplateConfirmationModal modal
Modal.show('createTemplateModal'); // this does not work.
// Modal.hide('addMoreTemplateConfirmationModal');
},
Have you tried closing the modal before showing the next one?
Otherwise you could maybe trigger the second modal on the onDestroyed event, although there might be a better way.
Template.addMoreTemplateConfirmationModal.onDestroyed(function() {
Modal.show('createTemplateModal');
});
Simply use setTimeout which runs only once after given miliseconds (300 is the miliseconds in the example below).
'click #confirmMorePGInstance': function(){
// close modal here
Meteor.setTimeout(function () {
//open the next modal here
}, 300);
},
PS: I suggest using 50-100 miliseconds more than the closing effect speed.

Fancybox default close does not work after form redirect

I've created my page using bootstrap and have a link to fire off a fancybox box as below:
<a class="iframe" href="AForm.asp?ID=<%=Request("ID")%>"><button class="btn-warning">Action Form</button></a>
JQuery
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox({
'type' : 'iframe',
'width':500,
'height':500,
'afterClose':function () {
window.location.reload(); }
});
});
</script>
The default functionality works fine to begin with: i can trigger fancybox to load, click the default cross icon and it closes the box - all working as expected.
When i submit a form within the fancybox (html/classic asp) and it does a redirect to a standard HTML page that literally just says "Please close this page" the default close cross icon does nothing. It is visible and in the correct place but there is no click functionality.
I have tried custom close buttons within the HTML page but nothing works - it just doesn't want to close at all. Anyone got any ideas? Thanks
Not so much an answer but after trying to fix this all day i gave up on Fancybox and found Colorbox to work pretty much out of the box for what i was trying to do. Colorbox

Build Modal Dynamically

How can I run the modal and build the modal from dynamically create elements.
Example, I have a button that I want to launch the modal, which is dynamically created.
I'm using this modal plugin:
http://labs.voronianski.com/jquery.avgrund.js/
I have tried this, it does work, although it doesn't work until the 2ND click of the button.
$('body').on('click','#siteSwitch', function(){
$(this).boxModal({
height: 800,
width: 800,
holderClass: 'boxModal',
showClose: true,
showCloseText: 'X',
enableStackAnimation: false,
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>'
});
});
Thankyou
I found the answer guys,
It seems adding openOnEvent: false as an option for the modal fixes it. It makes complete sense, by default it was true, so it's waiting for a 'click' event to fire the launch which hasn't happened until it's built once in the background.
Thanks!
Shannon
$(this).avgrund({})
code is like this, rather than boxModal()

jquery implementation of Please Wait dialog - safari specific issue

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.

jQuery UI .dialog() method failing silently in IE6

I'm having some trouble with IE6 and jQuery UI. I have a popup dialog (modal, if it matters), that displays a "yes/no" dialog to the user with some information. In order to facilitate this, I build the dialog with autoOpen = false, and then I call $('#popup').show() later on as needed, in response to various different events. Now, in IE6 (and only IE6, as far as I can tell), the .dialog method will occasionally fail but STILL return the jQuery object. So, rather than show a popup, the .show() method just display a div container in the html page.
What could be causing this, and how I can fix this behavior?
Thanks.
$('#myDialog').dialog({
autoOpen: false,
buttons: {
"No": function()
{
$(this).dialog('close');
//do stuff
},
"Yes": function()
{
$(this).dialog('close');
//do stuff
}
},
draggable: false,
modal: true,
resizable: false,
title: "Confirmation",
width: "500px",
zIndex: 2000
});
and later
$('#myDialog').dialog('open').show();
Pretty standard.
New information
I'm loading the page that makes the dialog with ajax inside of another dialog, which can be repeatedly created and destroyed. Now, each time my page gets loaded with ajax, .dialog(opts) should re-instantiate the dialog div, correct? I've found that this is the scenario.
1.) An outer dialog uses ajax to replace its content with my content.
2.) My content launches a dialog that was previously created and set to not autoopen.
3.) The outer dialog is destroyed as the inner dialog is closed.
4.) The outer dialog is reopened. The inner dialog no longer is able to appear as a dialog in ie6. This ONLY happens in ie6.
You should open your dialog using
$('#myDialog').dialog('open');
instead of
$('#myDialog').show();
The first method displays actual dialog box, while the one you are using just causes the #myDialog item to be displayed (with no UI Dialog magic). show() method is the part of the core jQuery library and shoudn't be used to invoke a dialog.
I had a similar situation and was never able to reuse the dialog. I had to destroy and recreate both dialogs each time.
I use the bgiframe: true and I never got any problem with them with I6, FFox, etc.
More info: http://docs.jquery.com/UI/Dialog#option-bgiframe
Regards.
By the way, when you are hiding your modal before you open it, are you using style="display:none" as your hiding attribute, or a CSS class, or jquery?
The reason I ask, is that if you use simply style="display:none" I never have problems with the modal showing the modal perfectly all the time using dialog("open") but if I use either css or jquery, I always have problems.
You may want to test it.
Marcus

Categories