我再次提出这个问题,原因可能是我在上一个问题中并不清楚。
我有一个向用户显示对话框的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>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<img alt="" src="../images/locate.jpg" onclick="locate();" />
</td>
<td>
</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时,对话框显示没有主题?