CODEWITHSUNDEEP
jqueryjquery-ui-dialog
user584018
user584018

Reputation: 11304

Stylish jquery dialog title to right upper corner of jquery dialog

I well know that how to create a jQuery dialog, moreover I also able to remove title as well as right side close image from the dialog.

But I need to show the title in separate DIV (stylish corner) to right upper corner of dialog.

Is this possible, below is sketch of my requirement. Thanks, enter image description here

Upvotes: 0

Views: 157

Answers (1)

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

Of course you can do it. You just have to play with a lot of css.

The easiest thing to do is find the span that is within the ui-dialog-titlebar, and move it around. You'll also have to adjust ui-dialog-titlebar as well.

See here for how to modify the dialog title bar. Basically, the easiest thing to do is as you make your dialog, add a class to the titlebar. That way you can separately modify the titlebar div and the span it contains with the titlebar text. You'll obviously need to tweak the css values I gave, since I don't know your actual code, but you'll end up with something like this:

$('#dlg').dialog({/*options*/}).parent().find("div.ui-dialog-titlebar").addClass('myClassname');
$('.myClassname span').css({position: "absolute", left: "300px", top: "-10px", background: "red"});
$('.myClassname').css("height", "50px");

Upvotes: 1

Related Questions