Java-Script/JqueryUI_MessageWidget.html at main · 26312/Java-Script · GitHub

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
    <head> <H3><b>Message Box Widget in JQuery UI</b></H3>
        <title>
            MsgBox Widget
        </title>
        <link rel="stylesheet" href="CSS/effects.css">
        <link rel="stylesheet" href="jquery-ui/jquery-ui.css">
        <link rel="stylesheet" href="jquery-ui/jquery-ui.structure.css">
        <link rel="stylesheet" href="jquery-ui/jquery-ui.theme.css">

    </head>
    <body>
        <div id="div1">
            <h4> Welcome to Jquery Session</h4>
            <br>
            <button id="btn1">Click here</button>
        </div>

        <div id="div2" title="Message Box" >
            <h4>This is the logo for Audi</h4><br>
            <img src="images/audi_logo.jpg" width="300px">
            <br> <br>

        </div>
    </body>
    <script type="text/javascript" src="JS/jquery.js"></script>
    <script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
    <script>

        $("#btn1").click(function(){

            $("#div2").dialog({

                title: "Shutter Box",
                draggable: true,
                resizable: true,
                modal:true,
                buttons:[
                    {
                        text:"Close",
                        icon:"ui-icon-arrowreturnthick-1-e",
                        click:function()
                        {
                            $(this).dialog("close");
                        }
                    },
                    {

                        text:"Okay",
                        icon:"ui-icon-folder-open",
                        click:function()
                        {
                            $(this).dialog("close");

                        }
                    }

                ]


            });
        });

    </script>
</html>