Question

我终于在我的脸书应用程序中找到了完美的弹出式样式框，但它似乎在IE中表现得非常奇怪。底部按钮悬挂在右侧..

你可以在这里看到它

http://demos.frnzzz.com/popup/

暂时用css搞砸了一段时间但是不能把手指放在上面..

HTML

    <body>
<div id="main">
 <div id="btn">Load Popup</div>
 <div id="backgroundPopup"></div>
 <div id="popupContact">
  <a id="popupContactClose">Close</a>
  <div id="popup_head"><h1>WebSpeaks.in</h1></div>
  <div id="personal">Post to Profile<br><br><br></div>
  <div id="contactArea">
   <textarea id="text"></textarea>
  </div>
  <div id="buttonArea">
   <div class="SharingOptions_Text">
    <a href="#" style="color:#3B5998;">Send as a Message instead</a>
   </div>
   <div id="Sharer_btns">
    <input type="button" value="Share" class="s_btn"/>
    <input type="button" value="Cancel" class="c_btn"/>
   </div>
  </div>
 </div>
</div>
</body>

Jquery的

<script type="text/javascript" src="jquery.js"></script> 
<script language="javascript">
function loadPopup()
{
 $("#backgroundPopup").css({"opacity": "0.1"});
 $("#backgroundPopup").fadeIn("fast");
 $("#popupContact").slideDown("slow");
}
function disablePopup()
{
 $("#backgroundPopup").fadeOut("slow");
 $("#popupContact").slideUp("slow");
}
function centerPopup()
{
 var windowWidth = document.documentElement.clientWidth;
 var windowHeight = document.documentElement.clientHeight;
 var popupHeight = $("#popupContact").height();
 var popupWidth = $("#popupContact").width();
 $("#popupContact").css({"position": "absolute","top": windowHeight/2-popupHeight/2,"left": windowWidth/2-popupWidth/2});
 $("#backgroundPopup").css({"height": windowHeight});
}

$(document).ready(function()
{
 $("#btn").click(function()
 {
  centerPopup();
  loadPopup();
 });

 $("#popupContactClose, .c_btn").click(function()
 {
  disablePopup();
 });

 $(document).keypress(function(e)
 {
  if(e.keyCode==27)//Disable popup on pressing `ESC`
  {
   disablePopup();
  }
 });
});
</script>

CSS

#main{
width:500px;
text-align:center;
margin:100px;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
}
#btn{
border:2px solid #00999999;
background-color:#3366FF;
color:#FFFFFF;
font-size:14px;
width:100px;
height:30px;
}

#popupContact *{
border:0pt none;
margin:0pt;
padding:0pt;
color:#333333;
text-align:left;
}
#popupContact body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
margin:0pt;
height:100%;
}
#popupContact a{
cursor: pointer;
text-decoration:none;
font-size:10px;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000; 
z-index:1;
}
#popupContact{
background-color:#fff;
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:250px;
width:450px;
border:10px solid #999999;
z-index:2;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
#popupContact h1{ 
background:#6D84B4 none repeat scroll 0 0;
border-color:#3B5998 #3B5998 -moz-use-text-color;
border-style:solid solid none;
border-width:1px 1px medium;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
padding:3px;
margin:0;
}
#popupContactClose{
line-height:14px;
right:6px;
top:4px;
position:absolute;
display:block;
color:#FFFFFF;
}
#personal{
padding:5px;
font-weight:bold;
font-size:12px;
}
#popupContact #buttonArea{
background:#F2F2F2;
border-top:1px solid #CCCCCC;
height:34px;
margin:0px;
position:absolute;
bottom:0px;
width:100%;
padding-top:5px;
}
#contactArea #text{
border:2px solid #cccccc;
margin:5px;
height:50px;
width:95%;
padding:0;
}
#buttonArea .SharingOptions_Text{
padding:3px;
float:left;
}
#buttonArea .SharingOptions_Text a{
color:#3B5998;
font-size:11px;
}
#Sharer_btns{
float:right;
}
#Sharer_btns .s_btn{
margin:2px 6px 6px 5px;
font-size:13px;
background-color:#5B74A8;
background-position:0 -48px;
border-color:#29447E #29447E #1A356E;
color:#FFFFFF;
padding:2px 6px;
text-align:center;
text-decoration:none;
vertical-align:middle;
white-space:nowrap;
}

#Sharer_btns .c_btn{
margin:2px 6px 6px 5px;
border-color:#999999 #999999 #888888;
border-style:solid;
border-width:1px;
color:#333333;
cursor:pointer;
display:inline-block;
font-size:11px;
font-weight:bold;
padding:2px 6px;
text-align:center;
text-decoration:none;
vertical-align:middle;
white-space:nowrap;
}

任何想法？

Answer 1

您指定了一个底部位置。对于IE7，您还需要明确指定左侧或右侧位置

#popupContact #buttonArea{
    background:#F2F2F2;
    border-top:1px solid #CCCCCC;
    height:34px;
    margin:0px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    padding-top:5px;
}

Jquery - Facebook喜欢Alert / Popup Box

1 个答案: