How to make jQuery ui dialog box look like the default JavaScript confirmation box?

Question

When a user needs to confirm something I use a simple confirmation box created with confirm, but some of my pages require "Yes" and "No" buttons instead of "Ok" and "Cancel" buttons, thus I use jQuery dialog on those pages. I want to make sure the styles of my message boxes are the same for my users across my entire application.

How do I make my jQuery dialog boxes look exactly like the JavaScript confirm box? Surely I can change the CSS of the dialog box enough to make the two look the same... right?

Confirmation box as generated by Grails in Firefox:

enter image description here

Dialog box as generated by Grails in Firefox:

enter image description here

So I want to completely remove the title bar from the dialog box, remove the rounded corners, change the striped background to grey, and change a bit of other coloring. I'm no CSS master, but I'm gonna try to muddle through it. Any CSS magician know how to do this quickly I would appreciate it.

The default confirm boxes are system-dependent. I think it would be much simpler just to use the jQuery dialog boxes throughout (e.g. replace all your existing confirm boxes with jQuery dialogs) than trying to get jQuery dialogs to look native. — Tikhon Jelvis
– Tikhon Jelvis, Commented Oct 19, 2011 at 3:59
@Tikhon Jelvis I am using Grails, and by default Grails uses confirmation boxes. I would rather not go through my entire application and replace every Grails provided confirmation and alert box with a dialog box. It wouldn't be that big of a deal, but Grails also relies on the fact that alert and confirm boxes stop browser processing until the user makes a selection, and that creates a problem which I believe will require excessive coding to fix. — ubiquibacon
– ubiquibacon, Commented Oct 19, 2011 at 4:02

Greg Pettit · Accepted Answer · 2011-10-19 04:00:08Z

1

Since all browsers have their own native UI, you can't. But you can replace all of your dialogs with one unified UI, like jQuery UI (as suggested by your choice of tags for this question).

answered Oct 19, 2011 at 4:00

Greg Pettit

10.8k5 gold badges57 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ubiquibacon Over a year ago

Yes, I am using jQuery dialog in the places where "Yes" and "No" buttons are required, but dialog boxes do not halt the browser like a confirm box does, and that requires extra coding to get around.

Greg Pettit Over a year ago

I see. I'm sure there are workarounds that the 'extra coding' would seem trivial for, but I admit I don't know any offhand. Without a workaround, you simply can't do what you want.

Collectives™ on Stack Overflow

How to make jQuery ui dialog box look like the default JavaScript confirmation box?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related