填充MVC局部视图异步jQuery的模态对话框，并显示在屏幕中心 [英] Populate jquery modal dialog with MVC partial view async, and show in center of screen

问题描述

我试图使用jQuery的模式对话框的东西，当点击显示的局部视图异步。 pretty简单，并且有关于这个问题的负荷，但我似乎无法得到它的工作。我有显示模式，但不是在市中心。我读过这是因为我填充DIV的显示的对话框后，所以的位置是相对于空div，而不是填充之一 - 我已经证明了这是案例展示一些静态的内容，它为中心的罚款。

I'm trying to use the jquery modal dialog to show a partial view async when clicking on something. Pretty simple, and there are loads of questions on this, but I can't seem to get it work. I have had the modal displaying, but not in the center. And I've read it's because I'm populating the div after the dialog is displayed, therefore the position is relative to the empty div, not the populated one - and I've proved this to be the case by showing some static content, and it centers fine.

所以，现在，我想首先得到局部视图，然后显示在负载（）回调的对话框，但它不工作。我上对话框（开放）行一个错误，因为该对话框的方法是不确定的。这里是我的code：

So now, I'm trying to get the partial view first, then show the dialog in the load() callback, but it's not working. I get an error on the 'dialog('open')' line, because the dialog method is undefined. Here's my code:

（P.S。我是新来的JavaScript / jQuery的，很抱歉，如果它是pretty明显）

(P.S. I'm new to javascript/jQuery, so sorry if it's pretty obvious)

<script type="text/javascript">

    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });
    });

    $(document).ready(function() {
        $('#show-modal').click(function() {
            $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                $('#my-dialog').dialog('open');
            });

            return false;
        });
    });

</script>

<div id="my-dialog"></div>

<a href="#" id="show-modal">Click Me </a>

帮助AP preciated！

Help appreciated!

修改我已经改变了code匹配达林的，并上传出的问题，似乎是？图片

Edit I've changed the code to match Darin's and uploaded an image showing what the problem appears to be?

推荐答案

OK，我发现这个问题：

OK, I found the problem:

我回到了我的模态对话框局部视图是使用MVC脚手架编辑视图，它在默认情况下包括已经包含在页面布局一些jQuery脚本，这一定是导致问题的产生。

The partial view I was returning for my modal dialog was created using the MVC scaffolding for an edit view, which by default includes some jQuery scripts which were already included in the layout page, which must have been causing the problem.

所有工作现在很好！

这篇关于填充MVC局部视图异步jQuery的模态对话框，并显示在屏幕中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！