The JQuery UI Dialog model form widget has an issue with ASP.NET when a button on the dialog is clicked to submit the page. It doesn't work because the form elements in the dialog window are outside the html form tags. So I used the fix of doing $("#dialog").parent().appendTo($("form:first"));.
It works in Firefox but not in IE because the modal window now appears to be part of the rest of the webpage which is disabled. Visually, this is evident by the stripes showing on both the modal window and the rest of the web page.
You should be putting the div that contains the dialog inside the form tags to begin with.
You could always submit the form manually by modifying the button to:
$('#myButton').click(function(){
$('form:first').submit();
});
I had this same issue. You need to append it to the form on open. This worked across all modern browser versions I could find.
$('#foobar').dialog({
autoOpen: false,
modal: true,
open: function () { $('#foobar').parent().appendTo('form:first') },
title: 'FOOBAR'
});
Related
I try to open a popup in tinyMCE, which can be resized by the user (with resize handler and all this fancy stuff).
I've tried multiple settings, but nothing worked.
Has anyone an idea how to accomplish this?
This is my simple code to open a Popup:
w = tinyMCE.activeEditor.windowManager.open({
title: "My html dialog",
url: '/',
width: 200,
height: 200
});
Thanks
TinyMCE's native windows have no ability to provide resize handles. You could build your own HTML page and open it by clicking a toolbar button (or menu option). As you would (in this case) be in full control of the page you are opening you could make it function however you like.
Hi i am using ckEditor in inside JQuery UI Dialog my jquery ui dialog loading code is like
$("#my-div").dialog({
height : 700,
width: 500,
modal : true,
closeOnEscape: false
});
When i click on table or image icon in ckeditor then it opens another dialog , below picture is sample example when i click on table icon, now the problem is that when table dialog is opened then every text box and drop down in that dialog become disable and i am unable to modify any rows or columns value. And when i modify the modal property to false then its working, i think there is some z-index issue , but at this time i am unable to solve it.
I Think that you need to remove all
tabindex=-1
from
jquery
UI dialog
Page.ClientScript.RegisterStartupScript(this.GetType(), "Alert", "JavaScript:alert('MY Message')", true);
Above code shows message box on top of the page , but I want it to the center of the page.
Alert boxes by default open at the center. Look at #Tomzan's comment, you are probably getting it at the top for just Chrome.
As far as I know it's not possible to make any modifications to that. If you want a custom alert box look into using jQuery ui. It'll allow you to put a messagebox wherever you want.
jQuery ui dialog box
The alert('message') is dialog box shown by browser, with very little to no control over its positioning.
Instead you can use jquery ui dialog to show your message. There are 'n' number of jquery plugins which are available to show the alert messages.
And of course you can control the positioning dialogs of these custom dialogs.
http://jqueryui.com/dialog/
http://needim.github.io/noty/
http://jquery-plugins.net/tag/alert-box
I have an ASP.NET C# page, with image thumbnails in it.
I created a script that opens a jQuery UI Dialog on each hover on a thumbnail that shows me the thumbnail in larger size in a dialog view, and when I hover out - dialog closes.
My little annoying problem is, that in every mouseover (trigger dialog to open) - the page makes itself 'longer' - a scrollbar appears on the side of the browser, and it seems like the page gets longer when a dialog is openning, but it shouldn't do so.
When I hover off (mouseout) - the dialog disappears and the page returns to its normal state.
Because of this- when I hover through the thumbnails, my page 'jumps'.
I looked for a solution for this, and I've added return false; for each dialog open, and close - and it still doesn't make any different.
Sorry for the unperfect english, and thanks for all helpers!
I finally got my solution - for all interested:
open: function(event, ui){
/*
* Scrollbar fix
*/
$('body').css('overflow','hidden');
}
I added this to dialog's opening event and it fixed the issue!
I'm opening a modal dialog for IE6 and above using the following javascript.
window.showModalDialog(
'SelectUser.aspx',
null,
'status:no;dialogWidth:500px;dialogHeight:220px;dialogHide:true;help:no;
scroll:yes;toolbar:no;title:no;resizable:yes;location:no;menubar:no;'
);
In the popup dialog box a grid is shown from which user can select... Grid has paging applied to it however when the pager link for next, previous, first, last or any page number is clicked page index changed is fired and page is posted back and the page result is shown in a new IE window. How to fix this.
Show your page (SelectUser.aspx) in iframe in the popup window.
The modal dialog box if contains a form and when post back will open up in a new window. However there is a workaround to this and that is to Add <base target="_self"/> inside of the <head> tags in the .aspx file of the ModalDialog window.