Can a JQuery Dialog open another Jquery Dialog?

I want to open a partial view as a JQuery dialog that when I click a link to open another Jquery dialog over the one that is already open.

Can I do that? If it is possible, how can I achieve that?

Edit 1:

First view

@model AuctionWebProject.Areas.Admin.Models.CategoryModel  
@{  
    ViewBag.Title = "Edit Category";  
    Layout = "~/Views/Shared/_Layout.cshtml";  
}  
<!DOCTYPE html>  
<html>  
<head>  
    <title>EditCategory</title>  
</head>  
<body>  
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>  
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>  
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>  
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>  
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>  
    <script type="text/javascript">  
        function ShowXsdEditor() {  
            $("#xsdEditor").dialog("open");  
        }  
    </script>  
    @using (Html.BeginForm())  
    {  
        @Html.ValidationSummary(true)  
        <fieldset>  
            <legend>CategoryModel</legend>  
            @Html.HiddenFor(model => model.Id)  
            <div class="editor-label">  
                @Html.LabelFor(model => model.Name)  
            </div>  
            <div class="editor-field">  
                @Html.EditorFor(model => model.Name)  
                @Html.ValidationMessageFor(model => model.Name)  
            </div>  
            <div class="editor-label">  
                @Html.LabelFor(model => model.Date)  
            </div>  
            <div class="editor-field">  
                @Html.EditorFor(model => model.Date)  
                @Html.ValidationMessageFor(model => model.Date)  
            </div>  
            <div class="editor-label">  
                @Html.LabelFor(model => model.Xsd)  
            </div>  
            <div class="editor-field">  
                @Html.TextAreaFor(model => model.Xsd, new { disabled = "disabled" })  
                @Html.ValidationMessageFor(model => model.Xsd)  
                <a href="javascript:void(0)" onclick="ShowXsdEditor();">Xsd Editor</a>  
            </div>  
            <p>  
                <input type="submit" value="Save" />  
            </p>  
        </fieldset>  
    }  
    <div>  
        @Html.ActionLink("Back to List", "Index")  
    </div>  
    @Html.Partial("XsdEditor", Model)  
</body>  
</html>

Second view

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">  </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>  
<div id="xsdEditor" style="display: none;">  
     <a href="javascript:void(0)" onclick="ShowDialog();">Add new element</a>  
     <div id="elementList">  
     </div>  
</div>  
@Html.Partial("AddXSElement", new AuctionWebProject.Areas.Admin.Models.XSElementModel())  
<script type="text/javascript">  
    $(document).ready(function () {  
        $("#xsdEditor").dialog({  
            autoOpen: false, width: 400, height: 330, modal: true, title:'XSD Editor'  
        });  
    });  

    function ShowDialog() {  
        debugger;  
        $("#addXSElement").dialog("open");  
    }  
</script>

I use JQuery v 1.6.2 and Jquery Ui 1.8.12

回答1:

According to the fiddle I have created, it will show up with no problem.

回答2:

Found the problem, it seems that the JQuery function that was in the document ready didn't work as it should. After reordering the dialogs java script, the problem disappeared.