Question

I am new to JQuery. I am developing a ASP.Net MVC application. In one of the views I am trying to open a JQuery Modal Dialog.
Here is the JavaScript code for this

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript" />
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"/>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"/>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"/>

<script type="text/javascript">
    $(document).ready(function () 
    {
        $(".openDialogLink").
        live("click", function (e) 
        {
            e.preventDefault();
            $("<div></div>").addClass("dialogBoxDiv").appendTo("body").
            dialog(
            {
                modal: true, 
                draggable: true,
                overlay: { backgroundColor: "#000000", opacity: 0.5 }, 
                title: $(this).attr("DialogTitle"),
                show: "puff",
                hide: "puff",
                closeOnEscape: true,
                close: function () 
                {
                    $(this).remove()
                },
            }
            ).load(this.href);
        });
        $(".close").
        live("click", function (e) 
        {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    }); 

Problem is the overlay for unused area in webpage is not visible. Looks like there is some small setting I am missing.

Help Please.

Answer 1

It seems to work fine with the background overlay.

http://jsfiddle.net/8bwNU/

The jQuery-ui css style sheet uses images for the jQuery stuff you’re using. Probably add the css file if you haven’t somewhere else already… You can download the components you need from here.

<link href="../../Content/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />

The zip file will contain a css file, relevant images and the jQuery-ui javascript file (that you’re currently using). The css looks for some images in a folder called ‘images’, so as long as the images are in your solution in a folder called images and you’ve referenced your css, it should apply the background overlay.