I need a simple example of how to use an <a> link to dis play a modal dialog box
I have googled and googled but I can't find a simple answer to this question. The example shown on this site show how to display a dialog upon page loading but this is of no use to me. dialogs usually are used to respond to an onClick event. I have seen some that display when a button is clicked but I can't seem to modify that to clicking on a link. This is what I have:
- <!Doctype html>
- <html>
- <head>
- <title></title>
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
- <script>
- $(function() {
- $( 'div.dialog' ).dialog( {modal:true,autoOpen:false} );
- $('ul>li>ul>li').on( 'click', function() {
-
- $( '#dialog' ).dialog( 'open' );
- });
- });
- </script>
- <style>
- .dialog {
- display:none;
- }
- </style>
- </head>
- <body>
- <div id="dialog" title="click for more info"><p> Frederick Handley and Susannah Jackson</p></div>
- <div class="dialog" id="dialog1" title="Node 1 Title">
- Frederick b. 1807 m. 1839 Susannah b. 1825
- </div>
- </body>
- <html>
Could someone please give me an example? I would appreciate an example rather than a link as an example would be directly related to my problem.
Thanks,
Paul