<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: lightgray;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
width: 600px;
height: 600px;
margin: 50px auto;
background-color: gray;
z-index: 1;
}
.demo {
position: fixed;
width: 100%;
height: 100%;
display: none;
z-index: 22;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iste fugit saepe incidunt voluptatum quisquam nulla asperiores dolores aspernatur at assumenda veniam porro ad delectus dicta magni facere perferendis officia commodi laboriosam laborum possimus similique pariatur reiciendis repudiandae suscipit quibusdam ipsa tempore dolore sunt nemo et expedita quis quod mollitia maiores nihil dolorum non accusamus omnis esse minus quas libero qui consequatur recusandae. Doloremque possimus voluptatum iure autem excepturi laborum mollitia dolorem eum fugit numquam architecto facere incidunt non laboriosam hic assumenda ipsam! Delectus sapiente dolorem aliquid voluptate magni voluptas ratione nulla ducimus suscipit quo est maiores atque molestias laboriosam perspiciatis neque inventore sed rem impedit odio autem nisi earum illum animi accusantium consequatur officiis tempore nemo modi! Laboriosam qui doloremque tempore quas corporis iste fugiat ratione libero vero aperiam quam minus itaque impedit at repellat illum animi nemo vitae officiis sed perferendis maiores quos cupiditate magnam dignissimos nesciunt excepturi voluptatibus suscipit amet reiciendis architecto quasi nihil accusantium voluptas laudantium atque odit praesentium! Ad harum delectus necessitatibus praesentium velit nobis officiis illum odio quibusdam inventore eum eveniet sapiente soluta aperiam expedita voluptatem ab fuga tempore dolor aut laborum atque ut labore reprehenderit rerum veritatis dignissimos ipsam quos porro minima. Autem quisquam excepturi assumenda deserunt nulla odio ea eveniet atque eum vitae dicta quaerat corrupti voluptas sapiente sint! Veritatis et aspernatur quaerat nulla necessitatibus tempora impedit provident mollitia beatae! Excepturi omnis architecto adipisci impedit sequi repellat dolorum laboriosam et totam consectetur doloribus quis ipsum aliquam alias repudiandae ex reprehenderit eaque error deleniti a ipsa? Beatae at culpa distinctio debitis vel tempore deleniti consequuntur est cupiditate laborum iste quo cum quis ex vero voluptate fugiat maxime facilis totam quia dolorum sunt veniam. Labore optio voluptatem at voluptas libero natus veritatis quidem nulla ipsa temporibus nihil aperiam placeat aliquam saepe obcaecati omnis asperiores.
<button>GOGOGO</button>
</div>
<div class="demo"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
(function(){
$('button').on('click', function(){
$('.demo').load('demo.html');
})
})();
</script>
</body>
</html>
これは私の html です。これを読み込みたい: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html DOM ウィンドウの全長にあるボタンをクリックして、どこかに閉じるボタンを配置します。を閉じて、もう一度インデックス ページを表示します。不透明度は良い方法ですが、demo.html は正しく読み込まれません。jQuery 機能も何もありません。取得できるのは背景画像だけであり、その理由はわかりません。