在MVC4中用于对话的Jquery

时间:2012-07-19 11:58:49

标签: jquery-ui

我使用了来自此链接http://jqueryui.com/demos/dialog/#animated的jquery ui来获取在MVC4应用程序中无效的对话框

这是我的观点     @ {         ViewBag.Title =“Dialog”;

}
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode"
        });

        $("#opener").click(function () {
            $("#dialog").dialog("open");
            return false;
        });
    });
</script>
<div class="demo">
    <div id="dialog" title="Basic dialog">
        <p>
            This is an animated dialog which is useful for displaying information. The dialog
            window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    <button id="opener">Open Dialog</button>
</div>
<!-- End demo -->
<div class="demo-description">
    <p>
        Dialogs may be animated by specifying an effect for the show and/or hide properties.
        You must include the individual effects file for any effects you would like to use.</p>
</div>
<!-- End demo-description -->
<div class="demo-description">
    <p>
        A modal dialog prevents the user from interacting with the rest of the page until
        it is closed.</p>
</div>
<!-- End demo-description -->

2 个答案:

答案 0 :(得分:0)

你没有连接你的javascript。试试这个:

$('#dialog').dialog({
     autoOpen: false,
     show: "blind",
     hide: "explode"
});

$(document).ready(function(){
     $('#opener').click(function () {
          $('#dialog').dialog("open");
          return false;
     });
});

(删除开头“$(function () {”和关闭“});”对 - 您的代码想要如上所示。

答案 1 :(得分:0)

添加$(documnet).ready,然后在其中定义您的功能。 。 ..

   $(document).ready(function () {

    code goes here  . . 
    });`