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 puter science courses lately involving C++ and Python 2, which has the ability to do this by invoking the System GUI, but I am more fortable 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.

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 puter science courses lately involving C++ and Python 2, which has the ability to do this by invoking the System GUI, but I am more fortable 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.

• javascript
• user-interface
• architecture
• dialog

Share Improve this question Follow edited Feb 10, 2013 at 2:26 ModernDesigner asked Feb 10, 2013 at 1:52 ModernDesignerModernDesigner 7,7171111 gold badges3636 silver badges4242 bronze badges 3

• Javascript isn't that low-level. – David G Commented Feb 10, 2013 at 2:02
• 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 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 Commented Feb 10, 2013 at 2:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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:

1. 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.
2. 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).

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.

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/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.

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