0
ウェブページが作成されています.jQueryポップアップには、ウェブサイトのロード時に自動的に表示される画像が表示されます。ポップアップに黒の透明なオーバーレイを作成します（リンク：like this）。そのポップアップを作成する方が簡単でした。しかし、私はイメージでこれを行うことができません。私はポップアップがページの左の境界から30％表示されるようにします。画像と黒いオーバーレイは、マウスを動かすとホバリング時に消えて再び表示されます。どうすればいいですか？ここでHTMLページのjQueryポップアップ（黒い透明なオーバーレイ付きのボックス）
は、HTMLコードです：
<head>
script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<a class="cha" data-popup-open="popup-imonelle" href="#"></a>
<div class="cha-popup" data-popup="popup-imonelle">
<div class="popup-pic">
<img src="Images/imonelle.jpg"/>
<a class="popup-hover" data-popup-close="popup-imonelle" href="#">x</a>
</div>
</div>
</body>
<footer>
<script src="js/Sciptquery.js"></script>
</footer>
とjQuery：
$(function() {
//----- OPEN when page loads
$(function(e) {
var targeted_popup_class = $('[cha-popup-close]').attr('cha-popup-close');
$('[cha-popup="' + targeted_popup_class + '"]').fadeOut(350);
});
//----- CLOSE on hover
$('[cha-popup-close]').on('hover', function(e) {
var targeted_popup_class = jQuery(this).attr('cha-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
});
そして最後に、CSSコード：
.cha-popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}
/* Inner */
.popup-pic {
max-width:845px;
width:90%;
padding:0px;
position:absolute;
top:50%;
left:30%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
}
/* Close on hover function */
.popup-hover {
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
}
}
}
私は私がのために使用されるコードを変更しました投稿に添付されている画像のポップアップ。しかし、何かが明らかに間違っています。
に変更しましたあなたが私たちを参照できるいくつかのデザインに触発されていますか？既存のサイトですか？マウスの上にマウスを置くと、イメージが黒色/透明のオーバーレイでポップアップ/ハイライト表示されます。しかしちょうどそれが事実であるかどうか確かめたいと思う。 – Searching
ええ、私はチャット（あなたは.cssでそれを見つけることができる）を意味する。ポップアップはこのチュートリアルからインスピレーションを得ています：[リンク] http://inspirationalpixels.com/tutorials/custom-popup-modal私はポップアップと透明なオーバーレイ（ボックスの外）がページの読み込み時に表示されるようにし、マウスがその上にマウスオーバーしている間は消えるようにします。 –
元の質問に回答してから変更する代わりに、これを変更すると別の質問になっていたはずです。あなたの質問を何か他のものに変えることについての適切な礼儀についてのいくつかのメタの議論を見てください。[1]（http://meta.stackoverflow.com/questions/252113/how-to-deal-with-constant-changing -questions）、[2]（http：//meta.stackoverflow。（3）（http://meta.stackoverflow.com/questions/295089/op）は、私の質問に答えて、 -changes-a-question-after-it-has-a-has-a-has-a-has-a-has-a-a-a-it-it-has-answers）を使用して、 – Santi