0

サイトのホームページに自動ポップアップ ボックスを追加しようとしています。このサイトの以前の回答のコードを使用しました。以下は次のとおりです。ポップアップは問題なく動作しますが、閉じるボタン/リンクも追加できますか? 助けてくれてありがとう。

Javascript:

<script type="text/javascript">
function show_popup()
{
  document.getElementById('popup').style.display = 'block'; 
}

window.onload = show_popup;
</script>

CSS:

#popup
{
position:absolute;
z-index:99;
display:block;
top:200px;
left:50%;
width:567px;
height:420px; 
margin-left:-250px; 
}

そして呼び出し：

<div id="popup">pop up window</div>
4

3 に答える 3

1 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>‌    
<div id="popup">
<div id='popup-close'>Close</div>
pop up window
</div>

そしてあなたのjQuery、

$(document).ready(function()
{
    $('#popup').show('fast'); // This will show the Pop Up in the Page Load
    $('#popup-close').click(function(e) // You are clicking the close button
    {
      $('#popup').hide('fast'); // Now the pop up is hided.
    });
});
于 2013-10-02T00:09:29.503 に答える
0

popupクリックすると this がアクティブになる別の div を追加しますdocument.getElementById('popup').style.display = 'none';。relativelydiv をtop, right十分にシンプルに配置できます。

于 2013-10-01T23:50:59.003 に答える
0

ポップアップ div 内で 2 番目に配置された絶対 div を使用する簡単な方法を次に示します。

それを改善し、より多くのものを追加する方法はたくさんあります。

function show_popup() {
  document.getElementById('popup').style.display = 'block'; 
}
window.onload = show_popup;
$('.popup-closer').click(function() {
	$('#popup').hide();
});
#popup {
  position: absolute;
  z-index: 99;
  display: block;
  top: 50%; left: 50%; /* if you want to center it do this.. */
  transform: translate(-50%, -50%); /* ..and this */
  width:150px;
  height:225px; 
  color: white;
  background-color: black;
}
.popup-closer {
  position:absolute;
  top: 5px;
  right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  border-radius: 20px;
  padding: 5px;
  cursor: pointer;
}
.popup-closer:hover {
  background-color: white;
}




html, body {
  margin: 0; padding: 0;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="popup">
  pop up window
  <div class="popup-closer"><i class="fa fa-close"></i></div>
</div>

セッションまたは 1 日にユーザーごとに 1 回だけ表示する場合は、セッションとローカル ストレージを調べます。ポップアップは、このセッション/この日/などに通知が既に提供されている場合、最初にセッション ストレージをチェックできます。サイト全体にコードがあり、ページが読み込まれるたびにポップアップしたくない場合も同じです。

また、#popup を作成しposition: fixed;て、ユーザーがページをスクロールしたときに、ポップアップを確認して閉じるまでポップアップが表示されるようにすることもできます。

フィドル

https://jsfiddle.net/Hastig/au3xm1oy/

より多くのアイデアのための追加のフィドル

https://jsfiddle.net/Hastig/au3xm1oy/2/

于 2016-08-29T04:12:28.947 に答える