访问网站时如何创建自动弹出窗口答案

【问题标题】：How to create auto popup when I access a website访问网站时如何创建自动弹出窗口
【发布时间】：2017-03-05 21:09:10
【问题描述】：

当我访问使用 Shopif 开发的网上商店时，我试图创建一个自动弹出窗口

<SCRIPT TYPE="text/javascript">
  function popup(mylink, windowname) { 
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string') href=mylink;
    else href=mylink.href; 
    window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); 
    return false; 
  }
</SCRIPT>

<BODY onLoad="popup('autopopup.html', 'ad')">

我有上面的弹出窗口自动打开的代码。但是，我需要有关如何进行这项工作的帮助，这是我正在尝试使用的网站https://petit-tapis.co.uk

提前谢谢你

【问题讨论】：

标签： javascript jquery html popupwindow

【解决方案1】：

正如@Scopey 所说，现代浏览器会阻止这种行为自动发生。但是，您可以添加一次点击，或者如果您希望人们在执行任何其他操作之前先采取行动，您可以添加一个覆盖任何其他功能的叠加层（但我可以告诉您这会扼杀用户体验）。

也许可以多说一下你的目标是什么。为什么要打开这个额外的窗口？这样做有什么好处（你有什么好处，用户从中得到了什么）？

编辑：请参阅下面的评论。我还整理了一个非常简单的版本：https://jsfiddle.net/uthhvu8d/

HTML：

<div class="wrapper">
  <div class="overlay">
    <form action="">
      <input type="text">
      <input type="text">
      <button>Submit</button>
    </form>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, inventore esse aliquam nostrum? Cupiditate provident, delectus, minus voluptatum natus fugiat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus temporibus vitae quibusdam maxime natus fugiat quis amet sed perferendis quod.</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nostrum consequatur animi quod rem eos nihil obcaecati repellat. At, accusamus.</p>
</div>

CSS：

.wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  display: none;
}

JS：

function showOverlay() {
  $('.overlay').show()
}
setTimeout(showOverlay, 2000)

【讨论】：

嗨 Falk，是否可以在页面加载后添加弹出窗口？
当用户访问我的网站时，会在几秒钟内自动填充注册表单。这就是我要找的。希望这能回答您的问题！
嘿，是的，您可以设置在页面加载时开始的超时，然后在 3-5 秒后添加覆盖。如果您想手动编写，您可以在 jQuery 中轻松完成此操作，或者您可能会获得一个为您完成此操作的插件。
您好 Falk，我不是在寻找任何插件，因为它们不支持单一选择加入 Mailchimp 集成。因此，我在 Wufoo 下创建了表单并下载了该表单的代码，并拥有了一个 Shopify 商店，我必须将该表单放在主页上。每当访问时，它应该在几秒钟后显示。对于 EX：ellsworthandivey.com 上面的网站显示了我希望该弹出窗口如何自动填充他们正在使用 Mailchimp 弹出表单。
非常感谢福尔克！真的很有帮助！

【解决方案2】：

谢天谢地，现代浏览器阻止了这种行为的发生。

任何window.open 必须仅作为用户触发事件的直接结果出现 - 例如鼠标单击或类似事件。

【讨论】：

【解决方案3】：

正如@Scopey 所说，浏览器会阻止您打开弹出窗口，但是您可以使用 HTML5 对话框，并且浏览器中的对话框叠加层可以发挥作用，您甚至可以打开它的模型，如果您愿意，需要更长的时间才能完成工作，但它对你来说很有趣

<dialog id="dialog">
    <iframe src="autopopup.html" />
</dialog>

【讨论】：