Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by jpxayhijta
jpxayhijta
8,353 Points

How can I design prompt window ? It is really basic window but I want to match it with my website design.

I want to change design of prompt window. can any please tell me that I can change it or not ?

and prompt window shows at top. How one can change position of window ?

2 Answers

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

Hi Bharat,

You can't style the dialog window, as it's a part of the browser. Instead, you can make your own dialog box and style that one. jQuery UI actually has a dialog box you can use, once you know how to use jQuery. Check it out: https://jqueryui.com/dialog/

I recommend taking the jQuery courses before attempting to use this widget.

jpxayhijta
jpxayhijta
8,353 Points

I'm learning JavaScript right now. But Thanks for your reply. I will surely check this out while learning jQuery.

Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Hi,

You can't modify the appearance of prompts or alerts in a cross-browser way. I recommend you instead to use & stylize the dialog HTML5 for prompts; with CSS animations & general CSS I'm sure you're probably now accustomed to. The dialog works for all modern browsers w/ the polyfill provided by Google (https://github.com/GoogleChrome/dialog-polyfill) that's truly elementary in implementation ( I know because I've used in production from small sites (~10 million in revenue) & much bigger ones).

Here's a demo of it in action: http://demo.agektmr.com/dialog/

Here's tutorial from Treehouse & NetTuts on the matter if you're more persuaded by someone else walking through the steps: http://blog.teamtreehouse.com/a-preview-of-the-new-dialog-element & http://webdesign.tutsplus.com/tutorials/native-popups-and-modals-with-the-html5-dialog-element--cms-23876

There's also http://t4t5.github.io/sweetalert/ as well to give you a variety of options.