自动打开弹出窗口的最简单方法？

Question

我希望在用户进入我的网站时自动打开一个弹出窗口。最简单的方法是什么？

弹出窗口应该在 div
应该出现一个关闭按钮以关闭弹出窗口

我已经用 jquery 和 CSS 尝试了几个解决方案，但有时关闭按钮没有关闭弹出窗口，而对于其他解决方案，有时脚本只是不起作用。

Answer 1

你可以这样做：

HTML

<div class="popup"><span class="close">close</span>..</div>

CSS

.popup{ 
  display: none;
  ...
}

jQuery

$(document).ready(function(){
   $('.popup').show();

   $(".close").click(function(){
   $(".popup").hide();
   });
})

Answer 2

我通常会使用 jQuery UI 对话框，但如果您想要更简单的东西，这里是：

如果这是你的 html div:

<div id="popup">
    <h1>Welcome</h1> 
    <span id="closePopup">Close</span>
</div>

这是你的CSS（弹出窗口的位置可能不完美，这是粗略的）：

#popup{
    display:none;
    position:absolute;
    top:150px;
    width:50%;
    left:25%;
}
#popupClose{
    cursor:pointer;
    text-decoration:underline;
}

那么这是你的 javascript(jquery):

$(document).ready(function(){
    $('#popup').show(); //show the pop up on page load
    $('#popupClose').click(function(){  //when the user clicks on the word close
        $('#popup').close();  //close the pop up
    });
});

自动打开弹出窗口的最简单方法？

The easiest way to automatically open a popup?

html

css

popup