0

ページ用に作成中のモーダル ウィンドウ タイプのアプリケーションで問題が発生しています。このアプレットは、IE を除くすべてのブラウザで (私が望んでいるように) 完璧に動作します。末尾のハッシュタグと関係があるのか​​、それとも何が起こっているのかはわかりません。

ここhttp://jsfiddle.net/Qm6Rn/を Chrome、Safari、または FF で表示すると、本来の動作がわかるはずです。ただし、IE でロードする場合、X をクリックしてウィンドウを閉じ、右側の固定ナビゲーション要素の 1 つをクリックするとすぐに、モーダルがアニメーション化されてコンテンツが表示されなくなります。

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&amp;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&amp;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;
}
4

1 に答える 1

1

使用している IE のバージョンは何ですか? IE9 で試してみましたが、コンテンツは 2 回目も残っていました (Chrome や Opera と同じです)。

于 2012-04-11T19:54:30.443 に答える