JavaScript - How to create a dialog without using alert () or window.open ()?
I was wondering if there is a way to create a popup dialog in JavaScript without using alert(), confirm(), prompt()
orwindow.open()
The reason is that I want to have something in the dialogue. Any content. (For example, a textbox div
, formatted content, or any number of input buttons I desire and have with any text) and none of alert(), confirm(),
or prompt()
allows you to do this. prompt()
only allows a text box. And alert()
and confirm()
only preset buttons and plain text allow. I don't want to use window.open()
because it will either navigate to a different url or to the same url with the same functionality.
Another thing is that all the specified options warn the user , hence the function name alert()
and prompt()
I want something less intrusive.
The reason I don't want to use the jQuery plugin or make my own plugin is because I want the OS native GUI in the dialog box.
Now I have never seen this used by any , and I would say that I have ample experience with web surfing and linking. Therefore, if this is not possible, another acceptable answer would be to have alert()
either confirm()
or or prompt()
with customize the buttons available (however much I want with whatever title values).
EDIT: The reason for this request is that lately I am studying computer science courses using C ++ and Python 2, which has the ability to do this by invoking the system GUI, but I am more comfortable with the browser and client side architecture. This and I am also just curious.
EDIT 2: I don't want to use plugins that can be manipulated in radical ways. I am wondering what I can do with the system, not what I can do with hacks .
source to share
What you are asking is possible in JavaScript, but not client side. On the server side you have running JavaScript on RingoJS and node.js .
Ringo can interact with Java packages. This way you can essentially use Swing to create graphical 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 either need to use a library to create such dialog boxes for you, or collapse yourself. If you choose to make your own, you will need to identify the operating system the user is using and name your dialog boxes accordingly.
You are probably better off using jQuery UI. Also, I don't think it's a good idea to make your web app look like a native app for two reasons:
- It will not look the same on all operating systems and all configurations. So it's easy to see that you are trying to make it look native, which breaks the feel of the website. Instead, stick to your website theme.
- Easier to use jQuery UI or some other library of this type. Everything else is just outwitted and a waste of time (at least for me).
source to share
You can still use jQuery modals (or any JS modals), but you can trim them to suit the custom framework. However, UA detection can be easily faked, especially with abundant extensions and dev tools.
Also, JS has no jurisdiction outside the 4 sides of the viewport (unless you get leverage from browser extensions / plugins, additional issues and limited most of the time). You cannot link directly to native operations with JS.
In general, I would say it is possible, but very difficult.
source to share
Why don't you just take a look at the custom javascript plugin? This would probably be the easiest one, 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's 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 a background color (meaning that if it would pop up, the background would be transparent). This is just to give you a general concept for creating a popup element.
source to share
take a look at the model dialogs from bootstrap, they look pretty cool :) http://twitter.github.com/bootstrap/javascript.html#modals
source to share