JQuery&；Internet Explorer
我在为页面构建一个模式窗口类型的应用程序时遇到问题。小程序在每个浏览器中都能正常工作（正如我所希望的那样），IE除外。我不确定它是否与尾部的标签有关，或者发生了什么 如果您在Chrome、Safari或FF中查看它，您将看到它的行为方式。但在IE中加载时，只要单击X关闭窗口，然后单击右侧的一个固定导航元素，模态就会在没有任何内容的情况下动画返回视图 HTML: CSS:JQuery&；Internet Explorer,jquery,internet-explorer,Jquery,Internet Explorer,我在为页面构建一个模式窗口类型的应用程序时遇到问题。小程序在每个浏览器中都能正常工作（正如我所希望的那样），IE除外。我不确定它是否与尾部的标签有关，或者发生了什么 如果您在Chrome、Safari或FF中查看它，您将看到它的行为方式。但在IE中加载时，只要单击X关闭窗口，然后单击右侧的一个固定导航元素，模态就会在没有任何内容的情况下动画返回视图 HTML: CSS: 你使用的IE版本是什么？我在IE9中尝试过，第二次内容仍然存在（与Chrome和Opera中的内容相同）。我玩过一点，要么我没
你使用的IE版本是什么？我在IE9中尝试过，第二次内容仍然存在（与Chrome和Opera中的内容相同）。我玩过一点，要么我没有正确使用它，要么它根本不起作用。我没有看到你所指的窗口外要关闭的X。这些是我看到的：顶部图像是当我点击任何导航链接时。底部图像相同，但当浏览器最大化时。IE和Chrome中的控制台都表示“hashchange”方法不存在。你查过你的档案了吗？谢谢Jonathan。如果您引用的是标题中的文件，那么实际上可以/应该删除这些文件，因为所有的JS都应该在JSFIDLE窗口中。我做了一个快速复制和粘贴，这就是为什么标题中仍然有一些文件被引用的原因。Charlie，如果您进一步扩展浏览器，您应该会看到X。很抱歉，模式太大了，可能不适合JSFIDLE中的特定应用程序和请求。它就在屏幕截图的“东北面”，我已经更新了JSFIDLE来缩小模式框，并且删除了那些没有包含的文件。再次感谢你们所有人的帮助！谢谢你，皮姆。我正在使用IE9，但在所有版本（7、8、9）中都尝试过，但我不是这样。我不能100%确定它为什么对你有效……尽管听起来很可笑，但问题是我在关闭模态窗口的锚标签中有一个#。在这样做的过程中，它在URL后面添加了#（自然），IE很难解释hashchange是什么。对不起那些IE的支持者，但这是我们需要让IE加速的另一个原因。感谢所有帮助我们确定问题所在的人。杰夫
<!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>
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();
});
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;
}