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).
Videos
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).
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.
I encountered the same issue (dialog would only open once, after closing, it wouldn't open again), and tried the solutions above which did not fix my problem. I went back to the docs and realized I had a fundamental misunderstanding of how the dialog works.
The $('#myDiv').dialog() command creates/instantiates the dialog, but is not necessarily the proper way to open it. The proper way to open it is to instantiate the dialog with dialog(), then use dialog('open') to display it, and dialog('close') to close/hide it. This means you'll probably want to set the autoOpen option to false.
So the process is: instantiate the dialog on document ready, then listen for the click or whatever action you want to show the dialog. Then it will work, time after time!
<script type="text/javascript">
jQuery(document).ready( function(){
jQuery("#myButton").click( showDialog );
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Hello World',
overlay: { opacity: 0.5, background: 'black'}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>
</head>
<body>
<input id="myButton" name="myButton" value="Click Me" type="button" />
<div id="myDiv" style="display:none">
<p>I am a modal dialog</p>
</div>
Looks like there is an issue with the code you posted. Your function to display the T&C is referencing the wrong div id. You should consider assigning the showTOC function to the onclick attribute once the document is loaded as well:
$(document).ready({
$('a.TOClink').click(function(){
showTOC();
});
});
function showTOC() {
$('#example').dialog({modal:true});
}
A more concise example which accomplishes the desired effect using the jQuery UI dialog is:
<div id="terms" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a id="showTerms" href="#">Show Terms & Conditions</a>
<script type="text/javascript">
$(document).ready(function(){
$('#showTerms').click(function(){
$('#terms').dialog({modal:true});
});
});
</script>