Home/ Questions/Q 7829285
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T10:42:20+00:00

I am trying to use the jQuery UI Modal Dialog widget on ASP.NET Web

  • 0

I am trying to use the jQuery UI Modal Dialog widget on ASP.NET Web Pages site. However, when I use the following code, I end up with a dialog with the close icon (x) underneath the title text rather than inline with it, and the resize icon on the left side of the dialog, above the buttons, rather than the bottom right-hand corner, where it should be.

You can see an example of what I am talking about here:

http://www.cutrategamer.com/app/sandbox

Here is the source code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link href="Styles/start/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>



    <script type="text/javascript">
        $(function () {

            // Dialog
            $('#dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });

            // Dialog Link
            $('#dialog_link').click(function () {
                $('#dialog').dialog('open');
                return false;
            });

            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                    function () { $(this).addClass('ui-state-hover'); },
                    function () { $(this).removeClass('ui-state-hover'); }
                );

        });

        </script>

        <!-- Adding jquery UI stuff -->

    <style type="text/css">

            /*demo page css*/

            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}

            .demoHeaders { margin-top: 2em; }

            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}

            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

            ul#icons {margin: 0; padding: 0;}

            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}

            ul#icons span.ui-icon {float: left; margin: 0 4px;}

        </style>

</head>
<body>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->

        <h2 class="demoHeaders">Dialog</h2>

        <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>

        <!-- ui-dialog -->

        <div id="dialog" title="Dialog Title">

            <p>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.</p>

        </div>

</body>
</html>

Can anyone tell me what I need to do in order to fix this widget?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your custom jQuery UI CSS file (jquery-ui-1.8.18.custom.css) does not include the jQuery Dialog CSS, so there is a bunch of missing code. You’ll need to rebuild it again and include jQuery Dialog when building it.

    • 0