jQuery对话框主题不在facebook下显示

时间:2013-10-29 10:44:45

标签: jquery facebook dialog themes

我再次提出这个问题,原因可能是我在上一个问题中并不清楚。

我有一个向用户显示对话框的page.aspx,tae page.aspx使用我用jQuery用户界面创建的主题。

当我直接浏览page.aspx(而非通过脸书管理系统)时,对话框会显示正确的主题。

当我浏览page.aspx作为Facebook应用程序时(来自Facebook的应用程序链接),对话框显示没有主题。

CSS链接是 -

页面代码如下 -

<head runat="server">
    <title></title>
    <link href="https://adiid.com/fb/styles/humanity/jquery-ui-1.10.3.custom.css" rel="stylesheet"
        type="text/css" />
    <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
        }
        #ttl
        {
            /*position: absolute;*/
            width: 700px;
            top: 0;
            left: 0;
            background-image: url('../images/ttlback.jpg');
            background-repeat: repeat-x;
            color: White;
            font-size: 24px;
            line-height: 34px;
        }
        #main
        {
            width: 700px;
            height: 800px;
            background-color: transparent;
            padding: 10px;
            font-family: Arial;
            font-size: 24px;
            overflow: hidden;
        }
        #whilediv
        {
            /*position: absolute;*/
            top: 0;
            left: 0;
            width: 700px;
            height: 800px;
            background-color: Gray;
            z-index: 10;
            opacity: 0.9;
            filter: alpha(opacity=90);
            display: none;
        }
        #leftDIV
        {
            /*position: absolute;*/
            top: 40px;
            left: 0;
            width: 500px;
            height: 100%;
            background-color: transparent;
            float: left;
        }
        #rightDIV
        {
            /*position: absolute;*/
            float: left;
            width: 200px;
            top: 40px;
            left: 500px;
            height: 100%;
            background-image: url('../images/stripback.jpg');
            background-repeat: repeat-x;
        }
        table#maintable
        {
            margin-top: 20%;
            margin-left: 10px;
            width: 220px;
            font-size: large;
            vertical-align: top;
            padding: 10px 20px 0px 20px;
        }
        table#maintable td
        {
            width: 220px;
            font-size: large;
            vertical-align: top;
            padding: 10px 20px 0px 20px;
        }

        .round
        {
            padding: 2px;
        }
        .style1
        {
            font-family: Aparajita;
            display: inline;
        }
        img
        {
            cursor: pointer;
        }
        #myerr
        {
            font-size: 16px;
            color: Red;
            font-weight: bold;
        }
        input
        {
            text-transform: uppercase;
        }
    </style>

    <script src="../Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript">
        function locate() {
            $("#resDialog").empty();
            $("#resDialog").append("Hello from dialog");
            $("#resDialog").dialog({
                modal: true,
                title: "Results found",
                //dialogClass: 'er1r',
                draggable: false,
                position: 'top',
                buttons: [
                                        {
                                            text: "Cancel",
                                            click: function () {
                                                $(this).dialog("close");
                                            }
                                        },
                                        { text: "Ask ",
                                            click: function () {
                                                // $(".ui-dialog-titlebar").show();
                                            }
                                        }
                                        ]
            });

        }


        $(function () {
            ////            //            $('.round').corner('5px');
            $('#whilediv').bind('ajaxStart', function () {
                $(this).show();
            }).bind('ajaxStop', function () {
                $(this).hide();
            });
            $('#whilediv').hide();


        });
    </script>
</head>
<body>
    <div id="resDialog" title="Dialog Title" />
    <div id="whilediv">
        AJAX CALL</div>
    <form id="form1" runat="server">
    <div id="main">
        <div id="ttl">
            <asp:Label ID="welcomeLabel1" CssClass="round" runat="server" Text="Label"></asp:Label>
            <%--<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1" >--%>
        </div>
        <div id="leftDIV">
            <table>
                <tr>
                    <td>
                        <span class="style1">Item ID:</span>
                    </td>
                    <td colspan="2">
                        <input id="Text1" name="Text1" runat="server" style="font-size: 24px" type="text"
                            maxlength="13" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="style1">Retype ID:</span>
                    </td>
                    <td colspan="2">
                        <input id="Text2" name="Text2" runat="server" style="font-size: 24px" type="text"
                            maxlength="13" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="myerr">
                        </div>
                    </td>
                </tr>
            </table>
            <table id="maintable" cellpadding="0">
                <tr>
                    <td class="style1">
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <img alt="" src="../images/locate.jpg" onclick="locate();" />
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        First, type in item ID.<br />
                        <br />
                        XXXX
                    </td>
                    <td>
                        First, type in item ID.<br />
                        <br />
                        XXXX
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </div>
        <div id="rightDIV">
            Right div
        </div>
    </div>
    </form>
</body>

为什么当从Facebook浏览page.aspx时,对话框显示没有主题?

0 个答案:

没有答案