You can achieve this simply using javascript libraries, for example most popular is
jQuery UI. Look at the following:
http://jsfiddle.net/robschmuecker/9z2ag/1/[
^]
http://salman-w.googlecode.com/svn/trunk/jquery-ui-dialog/modal-dialog-with-buttons.html[
^]
More examples:
http://salman-w.blogspot.fr/2013/05/jquery-ui-dialog-examples.html[
^]
https://www.safaribooksonline.com/library/view/jquery-ui/9781449325176/ch04s05.html[
^]
you can also try
ExtJS library, but it's heavier than jQuery and must be used for binding data grids and creating extended web UI.
http://docs.sencha.com/extjs/4.0.7/extjs-build/examples/message-box/msg-box.html[
^]
The could should look like this:
<div id="dialog" title="Dialog">
<p>This dialog was created on document ready event with <code>autoOpen</code> set to <code>false</code>.</p>
<p>It was opened by calling <code>.dialog("open")</code> method.</p>
</div>
<input type="button" id="button" value="Click to open the dialog">
javascript, that shows popup:
<script>
/*
* jQuery UI Dialog: Open Dialog on Click
* http://salman-w.blogspot.com/2013/05/jquery-ui-dialog-examples.html
*/
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#button").on("click", function() {
$("#dialog").dialog("open");
});
});
</script>