How to disable background in JQueryUI - Modal Form? - javascript

I have just started working in jQuery and ASP.NET MVC. I want the same modal form mentioned in the example of JQuery site - http://jqueryui.com/demos/dialog/#modal-form
$("#divSchedule").dialog({
autoOpen: false,
show: "slide",
modal: true
});
$("#btn").click(function () {
$("#divSchedule").dialog("open");
return false;
});
Dialog appears on the page but user can click on any of the background controls. Can you please suggest something to disable(blur) the background? Is it something to do with CSS?

Basically you made a mess of your dialog definition, try this http://jsfiddle.net/tctc2/1/

The quick answer for his question is:
use modal: true in order to
make background darker
disable any interaction with background functionality

Related

Jquery tooltip on dialog close button

In a web application that I am working on I have partial view that I display on a "details" page via a JqueryUI Dialog box. I am trying to add a JqueryUI tooltip for the close button, in the top right corner of the header, that comes stock with the dialog box. Below I have some of my code. I know the scripts will work from the location they are at currently in this web application due to my second function below. '.ui-dialog-titlebar-close' is the class that is applied to the close button in the dialog header (based off chrome firebug). The closest answer I've found to the solution was here https://forum.jquery.com/topic/tooltip-in-a-dialog-pop-up-without-hovering
Found this question similar to mine...
How to change the 'X' button in a jquery dialog box to read 'Close'
...any way I could manipulate the close button achieve what I asked like this? For example a ".addTitle()"?? About to tinker with this idea.
Any and all help or information is appreciated.
<script>
$(function() {
$('.ui-dialog-titlebar-close').tooltip({
content: function () {
return "test";
}
});
});
$(function () {
$('#testThing').tooltip();
});
</script>
With many thanks,
Rock
I would try using the create event on your dialog:
$("yourSelector").dialog({
create: function(){$(".ui-dialog-titlebar-close").attr("title","Your text goes here");}
});
This can be fixed by editing line which has
.addClass("ui-dialog-titlebar-close ui-corner-all")
in 'jquery.ui.dialog.js' or ('jquery.ui.all.js') page, It currently reads
.attr('role', 'button')
simply change it to
.attr({'role': 'button', 'title': "close (Esc)")
this will solve the issue
I think the easiest solution is to update the options configuration of jQuery UI dialog. Like:
$("#dialogConfirm").dialog({
autoOpen : false,
modal : true,
resizable : false,
dialogClass : "confirm-dialog",
closeText : "Click to Close the dialog" // Here is the Gem
});

How to hide a jquery dialog button on dialog load?

Can someone please help me with hiding/disabling a button on jQuery dialog box?
Scenario: On button click I am opening a dialog box with 'Add' and 'Update' button.
Inside the dialog I have 2 text box containing date and message.Both will populate data if data already present in database else they will be blank allowing user to add data.
Now, If text box has pre-populated data(message exist in db) I have to hide Add button as user can only update the message.I tried few tricks which I got from stackoverflow but none of them is working as I am opening dialog box on button click so I guess I am creating button dynamically and I cannot hide them on fly.
I also tried giving an id to dialog button and hiding/disabling it using below code:
$('#id').hide();
$('#id').attr('disabled','disabled');
I looked into the below fiddle which is exactly what I want but If I adopt this then I have to make a lot of code change. So, was wondering if anyone can provide me an easy solution.
[http://jsfiddle.net/kkh2a/1/]
Thanks in advance.
$('#dialog-form').dialog({width:350,height:300,
resizable:false,
modal:true,
closeOnEscape: true,
draggable:false,
show:{effect:"fade"},
buttons:{
Add:{
text:'Add',
id:'AddMsg',
click:function(){
}},
Update:function(){
},
Cancel:function(){
$(this).dialog("close");
}
}});
Try this:
$('#dialog-form').dialog({
...
buttons : {...},
open : function() {
$('#dialog-form')
.dialog('widget')
.find('div.ui-dialog-buttonpane div.ui-dialog-buttonset button')
.eq(0)
.button('disable');
}
});
Hy all,
I use this way:
$("#myDivForLoadingDialog").dialog({
modal: true,
resizable: false,
height: "auto",
draggable: false,
closeOnEscape: false,
open: function (event, ui) {
$("#myDivForLoadingDialog").prev().hide();
}
})
without setting button in the option it does not show any button inside
set closeOnEscape: false to avoid your loading message been closed by "esc" button
in the opencallback hide alle the title box (and the close button it has inside).
I prefer to avoid drag, resize and all features not needed by loading message.
it works with jQuery 1.11.1 (and maybe with all previous version)

jQuery popup (bPopup) fails to close as expected

I have created a popup using the lightweight jQuery plugin: bPopup.
I want the popup to appear on page load, and as such have the following code:
<script>
;(function($) {
$(window).load(function(){ //see edit below
$('#popup').bPopup({
opacity: 0.6,
modalClose: true
});
});
})(jQuery);
</script>
the customisation modalClose: true controls weather or not the popup is closed/dismissed on clicking on the popup, or surrounding overlay (see API)
However my popup successfully appears but does not dismiss, either when clicking on overlay OR when clicking on the element with the class that controls dismissal (by default, any element with class 'b-close' will also close the popup.
Any thoughts on where I am going wrong, or how I can find out what aspect is not working? Thanks
EDIT:
As per a suggestion in comments I have altered $(window).load(function(){ to $(document).ready(function(){however my problem persists
Discovered I was using 0.7.1 version of the popup, updated to 0.9.1 and that seems to have resolved the issue. Thanks to those who took a look.

Closing jquery modal window conditionally from ASP.net code-behind

I have an ASP.net page with a link to open a jquery-based modal window (that uses colobox jquery plugin). The content of that window in loaded from another aspx file (it loads an iframe). I want to close that window when the user presses an asp:button and if some condition in my code-behind went well.
I tried many ways to close that window from code-behind like these ways:
Page.RegisterStartupScript("X", #"$(this).dialog('close');");
Page.RegisterStartupScript("X", #"var win = window.open('','_self'); win.close();");
btnDone.Attributes.Add("onclick", #"var win = window.open('','_self'); win.close();");
btnDone.Attributes.Add("onclick", #"window.open('../px/nsk.aspx', '_self', null); window.close(); ");
System.Web.HttpContext.Current.Response.Write("<SCRIPT LANGUAGE='JavaScript'>");
System.Web.HttpContext.Current.Response.Write("self.close();");
System.Web.HttpContext.Current.Response.Write("</SCRIPT>");
but non of them can close that modal window. I'm testing on latest version of firefox.
the code behind can be supposed as sth like this:
// do some database works
if (condition)
{
// close this modal window
}
I also tried methods from jquery but none of them were a success.
Can you please telling me how can I close this window?
The other answers given provide specifics; this 'answer' attempts to be more conceptual/consultative.
Closing the Window
Closing the colorbox window is done on the client side. Both #KennyZ and #Farshid provide details on how to do this. By default, ColorBox is going to close on the press of ESC or its EXIT ui element (if used.) It's also possible to close the box programmatically, which sounds like what you need to do.
Where is the Close Action Invoked?
#KennyZ proposes an Ajax call to determine if "some condition in my code-behind went well"; that presumes you cannot tolerate a full page refresh (which seems reasonable to me) but it's something for you to decide.
If the determination of "went well" can only be done on the server, then you're looking at Ajax or a full page refresh.
Alternatively, if there is a way to make the determination on the client side, you won't need to reach back to the back end at all. Just close the colorbox window using js.
If you can provide more details about what the action is that controls closing/not closing the ColorBox window, maybe the community can help even more.
The problem seams to be solved this way:
Page.ClientScript.RegisterStartupScript(GetType(),
"CloseKey", "parent.$.colorbox.close();", true);
Use jQuery dialog with a div instead of an iframe.
Then you can use an Ajax post to run the serverside code and look at the results to decide what to do with the dialog.
Declare the dialog:
$(document).ready(function () {
jQuery("#MyDialog").dialog(
{
bgiframe: true,
autoOpen: false,
modal: true,
width: 800,
position: ['center', 100]
}
);
});
Populate the dialog and open it:
$('#OpenMyDialog').click(function () {
$.post($('url_for_dialog_contents'), function (data) {
$("#MyDialog").empty();
$("#MyDialog").append(data);
}, null, "html");
$('#MyDialog').dialog('open');
return false;
});
Submit the dialog:
$('#SubmitMyDialog').click(function () {
$.post($('url_for_dialog_action'), function (data) {
if (data.success == true) { $('#MyDialog').dialog('close'); }
}, null, "json");
});
I'm sure you'll need a lot more code in the submit dialog, but this is the general idea.

jQuery dialog box does not pop up

I have a dialog box that is supposed to pop up if the user is not logged in, and presses the "vote up" link on this page: http://www.problemio.com
I have some JavaScript here: problemio.com/js/problemio.js and I declare that popup in the global variables like this:
var $dialog = $('#loginpopup')
.dialog({
autoOpen: false,
title: 'Login Dialog'
});
var $problemId = $('#theProblemId', '#loginpopup');
$("#newprofile").click(function ()
{
$("#login_div").hide();
$("#newprofileform").show();
});
but not exactly sure if the #newprofile code is right, or how to make it global, or whether it can't be global. This confusion stems from me being kind of new at this.
The JavaScript console in Chrome does not show any errors relevant to this, which is even more confusing.
Any ideas on what I might be doing wrong?
Thanks!!
Try using
$("#loginpopup").dialog();
A call to
$(foo).dialog()
will initialize a dialog instance and will auto-open the dialog by
default. If you want to reuse a dialog, the easiest way is to disable
the "auto-open" option with:
$(foo).dialog({ autoOpen: false })
and open it with
$(foo).dialog('open')
. To close it, use
$(foo).dialog('close')
jQuery UI Dialog
I'm a bit confused, not sure if your question is complete. However, you have autoOpen: false set on the dialog, so you have to manually open it with:
$("#loginpopup").dialog("open");
in your "vote up" click handler.

Categories

Resources