在jquery.simplemodal和jquery之间产生冲突

时间:2012-08-06 08:24:25

标签: jquery asp.net-mvc-3 jquery-mobile

在我的asp.net mvc 3应用程序中,我有一个使用jquery.simplemodal插件的弹出动画。这是负责动画的代码

$.modal(data, {
containerId: 'popupdiv',
opacity: 5,
autoResize: true,
overlayCss: { backgroundColor: "#000" },
onShow: function () {
    initSwitchToLatest()
},
onOpen: function (dialog) {
    dialog.overlay.fadeIn(0, function () {
        var h = $("#popupdiv").height();
        var w = $("#popupdiv").width();
        var l = $("#popupdiv").css("left");
        var t = $("#popupdiv").css("top");
        dialog.container.fadeIn('fast', function () {
            if ($.browser.msie) {
                $('.popup').css('behavior', 'none');
            }
            $('#popupdiv').css('opacity', 0);
            dialog.data.height(0);
            dialog.data.width(0);
            $(".popup").width(0);
            $("#popupdiv").css("left", popup_mouse_x + "px");
            $("#popupdiv").css("top", popup_mouse_y + "px");
            dialog.data.show();
            $(".popup").animate({ "width": w, "height": "auto" }, 500);
            dialog.data.animate({ "height": h, "width": w }, 500);
            $("#popupdiv").animate({ "left": l, "top": t, "opacity": 1 }, 500, function () {
            $("#loading-mask").show();
            if ($.browser.msie) {
            $('.popup').css('behavior', 'url(../../../Scripts/PIE.htc)');
            }
            ReplacePopupContents($("#popupContentUrl").val());
            });
        });
    });
  }
});  

现在我正在尝试使用jquery-mobile滚动效果,但如果我像这样将这两个插件一起调用:

<script src="@Url.Content("~/Scripts/jquery.simplemodal-1.4.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>

我收到此错误

TypeError: $.modal is not a function

弹出动画不会显示。

PS:只有在我调用第二个插件时才会显示此错误。

1 个答案:

答案 0 :(得分:0)

您必须在简单模态文件之前包含jquery文件。像这样

<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.simplemodal-1.4.2.js")" type="text/javascript"></script>