求一段css,在进入blog时候,窗口前自动弹出图片,几秒钟后自动关闭

Posted 2023-03-19

求一段css,在进入blog时候,窗口前自动弹出图片,几秒钟后自动关闭

参考技术A 利于注释的机制，css里面可以写js的。 参考技术B 这个应该是javascript的范围了。

自动打开弹出窗口的最简单方法？ [关闭]

【中文标题】自动打开弹出窗口的最简单方法？ [关闭]

【英文标题】：The easiest way to automatically open a popup? [closed]

【发布时间】：2015-08-11 06:40:20

【问题描述】：

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

弹出窗口应位于div 应出现关闭按钮以关闭弹出窗口

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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码 。见How to create a Minimal, Complete, and Verifiable example

试试 [jQuery 对话框] (jqueryui.com/dialog)

【参考方案1】：

我通常会使用 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
    );
);

【讨论】：

谢谢马克，非常感谢:)

【参考方案2】：

你可以这样做：

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();
   );
)

【讨论】：

感谢路易斯的帮助！ :)