JavaScript - How to create a dialog window without using alert() or window.open()?

Question

I was wondering if there was a way to create a popup dialog in JavaScript without using alert(), confirm(), prompt() or window.open()

The reason why is because I want to be able to put anything inside the dialog. Any content. (E.g. a text box, div, formatted content, or however many input buttons I wish and have with whatever text), and none of the alert(), confirm(), or prompt() allows you to do this. prompt() only allows for a text box. And alert() and confirm() only allow it's preset buttons and plain text. I don't want to use window.open() because it relocates to either a different url, or the same url with the same functionality.

Another thing is that all of the given options alerts the user, hence the function name alert() and prompt() I want something that's a little less intrusive.

The reason I don't want to use a jQuery plugin or make my own plugin is because I want the dialog to have a GUI native to the OS.

Now, I have never seen this used by anyone, and I would say I have adequate experience in web surfing and referencing. So if this is impossible, then another acceptable answer would be to have an alert() or confirm() or prompt() with customize able buttons (however many I want with whatever caption values).

EDIT: The reasoning behind this request is because I have been taking computer science courses lately involving C++ and Python 2, which has the ability to do this by invoking the System GUI, but I am more comfortable with the browser-client side architecture. That and I am also just curious.

EDIT 2: I don't wish to use plugins which can be manipulated in drastic ways. I am interested in what I can do with the system not what I can do with hacks.

What's the environment? Web-browsers? Note that alert() & co. are browser APIs, and have nothing to do with JavaScript (which is a scripting language, and hence doesn't define I/O APIs, or any other form of environment-specific APIs). — Šime Vidas
– Šime Vidas, Commented Feb 10, 2013 at 2:08
Right, so I guess my concern would be how to manipulate the system's environment similar to what a browser does without actually making a native application. Otherwise, I would use C++ or Python. — ModernDesigner
– ModernDesigner, Commented Feb 10, 2013 at 2:10

Aadit M Shah · Accepted Answer · 2013-02-10 02:22:50Z

3

What you're asking for is possible in JavaScript, but not on the client side. On the server side you have JavaScript running on RingoJS and node.js.

Ringo can interface with Java packages. So you can essentially using Swing to create GUI applications in JavaScript. For example:

var {FlowLayout} = java.awt;
var {JButton, JFrame, JLabel} = javax.swing;

var frame = new JFrame("Hello World!");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

var contentPane = frame.getContentPane();
contentPane.add(new JLabel("Hello World!"));
contentPane.add(new JLabel("Press Me!"));
contentPane.setLayout(new FlowLayout);

frame.pack();
frame.setVisible(true);

On the client side however you'll need to either use a library to create such dialog boxes for you or roll your own. If you decide to make your own then you'll need to detect the operating system the user is using and style your dialog boxes accordingly.

You'll probably be better off using jQuery UI instead. Plus I don't think it's a good idea to make your web application look like a native application for two reasons:

It won't look the same on all Operating Systems and all configurations. So it's easy to see that you're trying to make it look native which breaks the feel of the website. Instead stick with the theme of your website.
It's easier to just use jQuery UI or some other library of that sort. Anything else is just overkill and a waste of time (at least according to me).

answered Feb 10, 2013 at 2:22

Aadit M Shah

74.5k31 gold badges177 silver badges311 bronze badges

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

1 Comment

ModernDesigner Over a year ago

+1 Hmm... Interesting input. I do wish I could do that in the client-side (browser), but that is interesting still. And I understand I shouldn't do this because it won't look the same, I was just curious. I wouldn't ever use this in a real-life instance. I will accept your answer, thought it doesn't really solve my problem, it gives me enough to go off of. Thanks!

Joseph · Accepted Answer · 2013-02-10 02:03:46Z

2

You can still use jQuery modals (or whatever JS modals) but you could skin them according to the user's platform. However, UA detection can easily be spoofed, especially with abundant extensions and dev tools.

In addition, JS has no jurisdiction beyond the 4 sides of the viewport (unless you get leverage from browser extensions/plugins, an additional hassle and most of the time limited). You can't call native operations with JS directly.

All in all, I'd say it's possible, but very tricky.

answered Feb 10, 2013 at 2:03

Joseph

120k31 gold badges186 silver badges238 bronze badges

2 Comments

ModernDesigner Over a year ago

Well, 1) I thought about basic platform detection, but replicating the platform's UI is trickiest of all. Besides, I want to know what I can do with the system. Not what I can do with hacks. 2) I don't mind about the four sides of the viewport. I'm not concerned about launching a native application from a browser, that's not my intention at all. Just trying to learn. Good answer, however.

ModernDesigner Over a year ago

Also, UA detection, as you said, can be a bumpy ride. Developers everywhere hate browser/system detection. Which I can understand. But if the user is tech-savvy enough to spoof a UA, then I don't care if it doesn't do what it's supposed to do because the user, is, (as said) tech-savvy enough to understand. So I guess that would be my fallback plan. Although many would have strong opinions about it.

Klik · Accepted Answer · 2013-02-10 02:34:56Z

Why don't you just look up a customizable javascript plugin? THat would probably be the easiest, instead of coding it yourself. But for your reference:

    <!--//create a div that has the contents of what you want-->
    <div id="popUpDialog" style='display: none; background-color: #999; position: absolute; top: 300px; left: 200px; width: 120px; height: 120px;'>some Text here<input type='radio' /><br /> Options 2<input type='radio' /></div>

    <!--//create an event to cause this popup to show up somewhere... i.e. a buttons onClick event-->
    <input id='btnTrigger' type='button' value='Show Dialog'></input>
    <input id='btnTrigger2' type='button' value='Close Dialog'></input>
    <script type="text/javascript">
    var el = document.getElementById("btnTrigger");

    el.addEventListener('mousedown', function() {
    var popUp = document.getElementById("popUpDialog");
    popUp.style.display = 'inline-block';
    });

    var el = document.getElementById('btnTrigger2');
    //alert(el);
    el.addEventListener('mousedown', function() {
    var popUp = document.getElementById('popUpDialog');
    popUp.style.display = 'none';
    });
    </script>

and here is a jsFiddle for you http://jsfiddle.net/crislivinitup/9VN7y/

Oh and by the way, in this example I did not change the position of the div to absolute, or set the background-color (which means if it did popup, the background would be transparent). This is just to give you the general concept of making an element popup.

hamilton.lima · Accepted Answer · 2013-02-10 02:24:31Z

-1

take a look on the model dialogs from bootstrap, they look pretty cool :) http://twitter.github.com/bootstrap/javascript.html#modals

answered Feb 10, 2013 at 2:24

hamilton.lima

1,91818 silver badges29 bronze badges

Collectives™ on Stack Overflow

JavaScript - How to create a dialog window without using alert() or window.open()?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related