使用 SimpleModal 和 ASP.NET MVC

发布于 2024-08-18 12:35:32 字数 3351 浏览 7 评论 0原文

我正在使用 Simple Modal 和 asp.net MVC。我已经使用 OSX 演示进行了设置，它将视图加载到对话框中。

我使用的javascript是：

jQuery(function($) {

   $("input.ema, a.ema").click(function(e) {
        e.preventDefault();
        $("#osx-modal-content").modal({
            appendTo: 'form',
            overlayId: 'osx-overlay',
            containerId: 'osx-container',
            closeHTML: '<div class="close"><a href="#" class="simplemodal-close">X</a></div>',
            minHeight: 80,
            opacity: 65,
            position: ['0', ],
            overlayClose: true,
            onOpen: OSX.open,
            onClose: OSX.close,
            onShow: OSX.show

        });
    });

    var OSX = {
        container: null,
        open: function(d) {
            var self = this;
            $.ajax({
                url: "/Message/UserMessage/",
                type: 'GET',
                dataType: 'html', // <-- to expect an html response
                success: doSubmitSuccess
            });
            function doSubmitSuccess(result) {
                $('div#osx-modal-data').html(result);
            }

            self.container = d.container[0];
            d.overlay.fadeIn('slow', function() {
                $("#osx-modal-content", self.container).show();
                $('div#osx-modal-title').html("Send Email");
                var title = $("#osx-modal-title", self.container);
                title.show();

                d.container.slideDown('slow', function() {
                    setTimeout(function() {
                        var h = $("#osx-modal-data", self.container).height() +
                        title.height() +
                        20; // padding
                        d.container.animate({
                            height: h
                        }, 200, function() {
                            $("div.close", self.container).show();
                            $("#osx-modal-data", self.container).show();

                        });
                    }, 300);
                });
            })

        },
        close: function(d) {
            var self = this;
            d.container.animate({
                top: "-" + (d.container.height() + 20)
            }, 500, function() {
                self.close(); // or $.modal.close();
            });
        },
        show: function(d) {
            var self = this;
            $("#txtEmail", self.container).hide();
            });

        }
    };


});

在显示功能上，我试图隐藏txtEmail框，但它似乎无法找到它。

进入对话框的 HTML 是

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CreateMessage</title>
</head>
<body>
    <div>

        <p>
            <input id="txtEmail" type="text" style="width: 90%" /></p>
        <p>
            <textarea id="TextArea1" cols="20" rows="5"></textarea></p>
        <p>
            <input id="submitmsg" type="submit" value="Send" /></p>
    </div>
</body>
</html>

谁能帮我解决这个问题吗？

谢谢，

原文

I am using Simple Modal with asp.net MVC. I have set it up using the OSX demo, which loads a view into the dialog.

The javascript I am using is:

jQuery(function($) {

   $("input.ema, a.ema").click(function(e) {
        e.preventDefault();
        $("#osx-modal-content").modal({
            appendTo: 'form',
            overlayId: 'osx-overlay',
            containerId: 'osx-container',
            closeHTML: '<div class="close"><a href="#" class="simplemodal-close">X</a></div>',
            minHeight: 80,
            opacity: 65,
            position: ['0', ],
            overlayClose: true,
            onOpen: OSX.open,
            onClose: OSX.close,
            onShow: OSX.show

        });
    });

    var OSX = {
        container: null,
        open: function(d) {
            var self = this;
            $.ajax({
                url: "/Message/UserMessage/",
                type: 'GET',
                dataType: 'html', // <-- to expect an html response
                success: doSubmitSuccess
            });
            function doSubmitSuccess(result) {
                $('div#osx-modal-data').html(result);
            }

            self.container = d.container[0];
            d.overlay.fadeIn('slow', function() {
                $("#osx-modal-content", self.container).show();
                $('div#osx-modal-title').html("Send Email");
                var title = $("#osx-modal-title", self.container);
                title.show();

                d.container.slideDown('slow', function() {
                    setTimeout(function() {
                        var h = $("#osx-modal-data", self.container).height() +
                        title.height() +
                        20; // padding
                        d.container.animate({
                            height: h
                        }, 200, function() {
                            $("div.close", self.container).show();
                            $("#osx-modal-data", self.container).show();

                        });
                    }, 300);
                });
            })

        },
        close: function(d) {
            var self = this;
            d.container.animate({
                top: "-" + (d.container.height() + 20)
            }, 500, function() {
                self.close(); // or $.modal.close();
            });
        },
        show: function(d) {
            var self = this;
            $("#txtEmail", self.container).hide();
            });

        }
    };


});

On the show function I am trying to hide the txtEmail box, but it doesnt seem to be able to find it.

The HTML which is going into the dialog is

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CreateMessage</title>
</head>
<body>
    <div>

        <p>
            <input id="txtEmail" type="text" style="width: 90%" /></p>
        <p>
            <textarea id="TextArea1" cols="20" rows="5"></textarea></p>
        <p>
            <input id="submitmsg" type="submit" value="Send" /></p>
    </div>
</body>
</html>

Can anyone help me out on this?

Thanks,

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无人接听 2024-08-25 12:35:32

我相信在调用 show 方法时 AJAX 调用尚未完成，因此该元素在您要隐藏它时并不存在。您可能应该将 open 处理程序中 ajax 调用之后的所有代码以及隐藏 txtEmail 元素的代码移至 ajax 回调中。

var OSX = {
    container: null,
    open: function(d) {
        var self = this;
        $.ajax({
            url: "/Message/UserMessage/",
            type: 'GET',
            dataType: 'html', // <-- to expect an html response
            success: function(html) {
                $('div#osx-modal-data').html(result)
                                       .find("#txtEmail")
                                       .hide();
                ...rest of code to display the dialog...
            }
        });

I believe that the AJAX call hasn't completed by the time the show method is invoked and thus the element doesn't exist at the time that you are going to hide it. You should probably move all of the code following the ajax call in the open handler into the ajax callback, along with the code to hide the txtEmail element.

var OSX = {
    container: null,
    open: function(d) {
        var self = this;
        $.ajax({
            url: "/Message/UserMessage/",
            type: 'GET',
            dataType: 'html', // <-- to expect an html response
            success: function(html) {
                $('div#osx-modal-data').html(result)
                                       .find("#txtEmail")
                                       .hide();
                ...rest of code to display the dialog...
            }
        });

回复收藏 0 原文

~没有更多了~