У меня есть всплывающее окно, построенное с использованием Jquery.Block-UI и ajax ... и у меня нет проблем с функциональностью, но дело в CSS, когда я проверил в Chrome, проблем с CSS нет ... Но когда этодоходит до IE и FIREFOX хуже ... Дизайн всплывающих окон исчез ... посмотрите на изображения ниже
IN CHROME : WORKS FINE:
IN IE-8
IN FIREFOX:
Вот код:
В заголовке тега:
<link href="style.css" rel="stylesheet" type="text/css" />
Содержимое:
<table class="quot-popup" cellpadding="0" cellspacing="0">
<tr><td><div style="float: right;"><input type="image" style="" src="../Webimages/x.png" onclick="closePop();"/></div></td></tr>
<%if(navLevel.trim().equalsIgnoreCase("0")){%>
<tr><td class="poptd">Are you a Registered User please <a href="web/login.jsp">Sign in</a> to Quote List, Or <a href="web/new_user_registration.jsp">Sign Up</a> to Register.</td></tr>
<%}else if(navLevel.trim().equalsIgnoreCase("1")){%>
<tr><td class="poptd">Are you a Registered User please <a href="login.jsp">Sign in</a> to Quote List, Or <a href="new_user_registration.jsp">Sign Up</a> to Register.</td></tr>
<%}%>
<tr><td class="poptd">Or</td></tr>
<tr><td class="poptd">You want to continue without Register, <a href="javascript:showMail();">Click Here</a> to Quote List.</td></tr>
</table>
<table id="askEmail" class="quot-mailPopup" cellpadding="0" cellspacing="0">
<tr><td class="mailtd1">Enter your Email Address : </td>
<td class="mailtd2"><input type="text" id="anonymousEmailId" name="anonymousEmailId" value=""/></td>
<td class="mailtd3"><input type="image" src="../Webimages/go-btn.jpg" onclick="sbtEmail(); return false;"/></td></tr>
</table>
CSS:
table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}
table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}
table.quot-mailPopup{width: 100%; font-size: 11px; font-weight: bold; display: none; text-align: center;}
table.quot-mailPopup td.mailtd1{width: 40%; padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2{width: 50%; padding-top:6px;padding-bottom:6px; padding-right:3px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2 input{width: 250px; height:18px;}
table.quot-mailPopup td.mailtd3{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
HTML: pop up will be called on click <a href="***.jsp" id="QutLstLnkId">List</a>
<!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>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<link href="Webcss/style.css" rel="stylesheet" type="text/css" />
<link href="Webcss/contentslider.css" rel="stylesheet" type="text/css" />
<link href="Webcss/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
<link href="Webimages/favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="Webjs/jquery.js"></script>
<script type="text/javascript" src="Webjs/jquery.blockUI.js"></script>
<script type="text/javascript" src="Webjs/ajax.js"></script>
<script type="text/javascript">
//------------------------------------- For Pop-Up
$(function() {
$('#QutLstLnkId').click(function() {
var qMailId = $("#qtMailId").val();
qMailId = $.trim(qMailId);
if(qMailId == "null" || qMailId == ""){
$.blockUI({
message: $('#messageDispDiv'),css: {
width:'530px',
height:'auto',
top: ($(window).height() - 110) /2 + 'px',
left: ($(window).width() - 530) /2 + 'px'
} });
$("#messageDispDiv").block({css:{border: 'none',padding: '15px',backgroundColor: '#000','-webkit-border-radius': '10px','-moz-border-radius': '10px',width:'200px',opacity: .5,color: '#0A7A48'}});
enqueue("web/quoteList.jsp?oper=QUOTLSTAUTH&pg=0",processAjax);
}else{window.location.href="web/createQuoteList.jsp";}
});
});
function processAjax(s){
$("#messageDispDiv").unblock();
$("#messageDispDiv").html(s);
}
function closePop(){
$.unblockUI();
}
function showMail(){
$("#askEmail").show();
}
//------------------------------------- For Pop-Up
</script>
</head>
<body>
<!-- PopUp div -->
<div id="messageDispDiv" style=" display: none; width:530px; min-height: 110px; border: 1px solid #0A7A48; text-align:center;">
<div id="askEmailId" style="display:none;">
</div>
</div>
<!-- PopUp div -->
</body>
</html>
Спасибо.