Question

当我访问在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

上工作的网站

先谢谢你

Answer 1

值得庆幸的是，现代浏览器可以防止这种情况发生。

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

Answer 2

正如@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)

Answer 3

正如@Scopey所说，浏览器阻止你打开一个弹出窗口，但你可以使用HTML5对话框，浏览器中的对话框覆盖有一个游戏你甚至可以打开它的模型如果你想要花一点时间来获得它工作，但它对你的影响

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

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

3 个答案: