1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Dialog example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <style type="text/css">
        .click_me {
            display: inline-block;
            margin: 1em;
            padding: .5em;
            background: #eee;
            border: 1px solid #ccc;
            text-decoration: none;
        }

        #dialog {
            background: #ddf;
            padding: 1em;
            border: 2px solid #f00;
        }
    </style>
  
    <script type="text/javascript">//<![CDATA[
        $(document).ready(function () {
        
            var dialog = $('#dialog');
            
            dialog.dialog({
                width:    460,
                autoOpen: false
            });
            
            $(".click_me").bind('click', function (e) {
                e.preventDefault();
                dialog.dialog('open');
            });
        });;//]]>  
    </script>
</head>

<body>
    <a href="" class="click_me">Click for a modal</a><br>
    <div class="demo">
        <div id="dialog" title="Upload Your Profile Picture">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, tellus non tincidunt interdum, urna massa sagittis elit, sit amet scelerisque orci sem eu erat. Curabitur et dui in dui varius mollis et vel nisi. Etiam at ligula est, ut porta eros. Fusce semper fringilla leo, ut hendrerit tellus ultrices sit amet. Maecenas mattis quam ac massa vehicula id molestie ante commodo. Pellentesque at nibh nisl, eget euismod ipsum. Fusce dictum vulputate dolor, non consequat risus scelerisque et.
        </div><!-- end of id dialog -->
    </div><!-- End demo -->
</body>
</html>