0
我在模擬窗口類型的應用程序中遇到問題，我正在構建頁面。該小程序完美（正如我想要的那樣）在除IE以外的每個瀏覽器中都能正常工作。我不確定它是否與尾部標籤有關，或者發生了什麼。JQuery和Internet Explorer
如果您在Chrome，Safari或FF中查看此處http://jsfiddle.net/Qm6Rn/，您將會看到它應該表現得如何。當IE加載不過，當您點擊X關閉窗外，然後點擊右側的固定導航元素之一，因爲很快，模態動畫回到視圖中沒有任何內容。
HTML：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta description="#">
<meta keywords="#">
<title>TITLE</title>
<meta name="viewport" content="width=1020" />
<!-- <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />-->
<link rel="stylesheet" href="assets/css/global.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="assets/js/global.js"></script>
<!--[if IE]>
<link rel="stylesheet" href="assets/css/ie.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
</head>
<body>
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=209710702470757";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="video_box"> <a href="#" class="close-button">X</a>
<div class="box-navigation">
<ul>
<li><a href="#videos" class="sidebar-videos"><img src="http://www.gowithcea.com/uploadedImages/js/images/video-icon.png" alt="" />Video</a>
</li>
<li><a href="#reviews"><img src="http://www.gowithcea.com/uploadedImages/js/images/review-icon.png" alt="" />Reviews</a>
</li>
<li><a href="#facebook"><img src="http://www.gowithcea.com/uploadedImages/js/images/facebook-icon.png" width="18" alt="" />Facebook</a>
</li>
</ul>
</div>
<div class="section video" data-title="videos">
<object width="640" height="480">
<param name="movie" value="http://www.youtube.com/v/R9cNtrrCP0E?version=3&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/R9cNtrrCP0E?version=3&hl=en_US" type="application/x-shockwave-flash" width="640" height="480" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div>
<div class="section active reviews" data-title="reviews">This is a block, and it needs to swap out. Will it work? That is the question...</div>
<div class="section facebook" data-title="facebook">
<div class="contentFeedLeft" style="height:480px;">
<fb:like-box href="http://www.facebook.com/ceastudyabroad" width="640" height="480" show_faces="false" stream="true" header="false"></fb:like-box>
</div>
</div>
</div>
<div>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<ul class="fixed-navi">
<li><a href="#videos" class="activator video-button"><img src="http://www.gowithcea.com/uploadedImages/js/images/video-dark-icon.png" alt="watch a video" />Video</a>
</li>
<li><a href="#reviews" class="activator review-button"><img src="http://www.gowithcea.com/uploadedImages/js/images/review-dark-icon.png" alt="read our reviews" />Reviews</a>
</li>
<li><a href="#facebook" class="activator facebook-button"><img src="http://www.gowithcea.com/uploadedImages/js/images/facebook-icon.png" alt="visit us on facebook" class="fb" /></a>
</li>
</ul>
</body>
</html>
的JavaScript：
jQuery(document).ready(function ($) {
$.slidingBox = function (event) {
$('.fixed-navi li a.activator').live('click', function (event) {
$('#video_box').animate({
top: '50%',
opacity: 1
}, {
queue: false,
duration: 450
});
$('.fixed-navi').fadeOut('slow');
});
$('.close-button').click(function (event) {
$('#video_box').animate({
top: '-50%',
opacity: 0
}, {
queue: false,
duration: 450
});
$('.fixed-navi').fadeIn('slow');
});
}
$.slidingBox();
$.slidingBoxContent = function (event) {
$(window).hashchange(function() {
var hash = window.location.hash;
if (hash) {
var $el = $(".box-navigation ul li a[href='" + hash + "']"),
$panel = $("#video_box .section[data-title='" + hash.replace('#', '') + "']");
$(".box-navigation ul li a.active").removeClass('active');
$el.addClass('active');
$("#video_box .section.active").fadeOut(function() {
$("#video_box .section.active")
.removeClass('active');
$panel.fadeIn()
.addClass('active');
});
}
});
$(window).hashchange();
}
$.slidingBoxContent();
});
CSS：什麼是你使用
img {
border: 0 !important;
}
#video_box {
width: 820px;
height: 520px;
background: #FFF;
color: #000;
border: 1px solid #999999;
top: -90%;
left: 50%;
margin-top: -260px;
margin-left: -410px;
position: fixed;
-webkit-box-shadow: 0px 0px 5px 5px #cecece;
-moz-box-shadow: 0px 0px 5px 5px #cecece;
box-shadow: 0px 0px 5px 5px #cecece;
z-index: 4000;
}
.video {
position: absolute;
left: 20px;
top: 20px;
}
.reviews {
position: absolute;
left: 20px;
top: 20px;
}
.facebook {
position: absolute;
left: 20px;
top: 20px;
}
#video_box .section {
display: none;
}
#video_box .section.active {
display: block;
}
.fixed-navi {
position: fixed;
top: 213px;
right: 0;
color: FFF;
list-style: none;
padding: 0;
width: 50px;
}
.fixed-navi li {
padding: 0;
margin: 0 10px 0 0;
width: 48px;
height: 48px;
}
.fixed-navi li a {
background: url(http://www.gowithcea.com/uploadedImages/js/images/fixed-button.jpg) no-repeat;
display: block;
width: 48px;
height: 16px;
font: 10px Arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
font-weight: bold;
border-bottom: 1px solid #061123;
border-left: 1px solid #006588;
border-right: 1px solid #006588;
border-top: 1px solid #006588;
padding-top: 30px;
position: relative;
}
.fixed-navi li a img {
position: absolute;
bottom: 21px;
left: 17px;
width: 17px;
}
.fixed-navi li a img.fb {
position: absolute;
bottom: 50%;
left: 50%;
width: 22px;
margin-left: -11px;
margin-bottom: -11px;
}
.fixed-navi li a:hover {
background-position: 0 -48px;
}
.fixed-navi li a:active {
background-position: 0 -96px;
}
.close-button, .close-button a {
position: absolute;
top: -8px;
right: -8px;
width: 30px;
height: 24px;
background: url(http://www.gowithcea.com/uploadedImages/js/images/close-button.png) no-repeat;
color: #FFF !Important;
text-decoration: none !important;
text-align: center;
-webkit-box-shadow: 0px 0px 1px 1px #cecece;
-moz-box-shadow: 0px 0px 1px 1px #cecece;
box-shadow: 0px 0px 1px 1px #cecece;
font: bold 26px/20px Arial, sans-serif;
padding-top: 6px;
}
.box-navigation {
width: 140px;
height: 520px;
background: #123451;
float: right;
}
.box-navigation ul {
background: url(http://www.gowithcea.com/uploadedImages/js/images/sidebar-button.png) repeat;
list-style: none;
margin-top: 0;
padding-top: 36px;
padding-bottom: 0;
}
.box-navigation ul li {
float: right;
width: 140px;
height: 38px;
}
.box-navigation ul li a img {
position: relative;
margin-right: 10px;
top: 4px;
}
.box-navigation ul li a {
padding: 5px 6px 6px 14px;
background: url(http://www.gowithcea.com/uploadedImages/js/images/sidebar-button.png) repeat-x;
height: 25px;
float: left;
width: 120px !Important;
color: #FFF;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
font-size: 14px;
}
.box-navigation ul li a:hover {
background: url(http://www.gowithcea.com/uploadedImages/js/images/sidebar-button.png) 0 -36px;
}
.box-navigation ul li a.active {
background: url(http://www.gowithcea.com/uploadedImages/js/images/sidebar-button.png) 0 -72px;
border-top: 1px solid #00638A;
border-bottom: 1px solid #0a223a;
}
我已經玩了一下，要麼我沒有正確使用它，要麼根本不工作。我沒有看到X關閉窗口，你指的是。這些是我看到的：http://imgur.com/a/793Mo頂部圖像是當我點擊任何導航鏈接。底部圖像是相同的，但瀏覽器是最大化的。 – 2012-04-11 19:51:35
控制檯在IE和Chrome說，「hashchange」方法不存在。你有沒有正確引用你的文件？ – Sampson 2012-04-11 20:02:44
謝謝喬納森。如果你指的是在頭文件，這些能/實際上應該被刪除所有的JS的應該是在的jsfiddle窗口。我做了一個快速複製和粘貼，這就是爲什麼頭文件中還有一些文件被引用。 – jayjo 2012-04-11 20:21:25