显示后关闭 jQueryUI 对话框并在新浏览器窗口中打开页面

Question

jQuery当我点击第二张图片时，我打开了一个对话框，我很好奇如何在 5 秒后关闭对话框并强制在新窗口中加载页面，而不是像现在这样在同一个窗口中加载。有什么建议么？

请检查代码：

$(function() {

  $(".images").find("a").eq(1).on('click', function(e) {

    e.preventDefault();

    $("#dialog").dialog({

      autoOpen: false,

      open: function(e) {

        $('body').addClass('modal');

      },

      close: function(e) {

        $('body').removeClass('modal');

      }

    }).dialog("open");

    setTimeout(() => {

      /*window.location.href = $(this).prop("href");*/

      $("#dialog").dialog("close"); /*close*/

    }, 5000);

  });

});

#dialog {

  display: none;

}

img {

  width: 300px;

  height: 250px;

  object-fit: cover;

}

.modal {

  background-color: pink;

}

.modal:after {

  content: '';

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, .7);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<script src=""></script>

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<!-- Starting the HTML -->

<div class="modal-body">

  <div class="images">

    <a href="https://www.example.net">

      <img src="https://images.pexels.com/photos/5214132/pexels-photo-5214132.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">

    <a href="https://www.example2.net">

      <img src="https://images.pexels.com/photos/4995558/pexels-photo-4995558.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">

    </a>

  </div>

  <div id="dialog" title="Lorem ipsum">

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>

  </div>

</div>

Answer 1

dialog您可以将您的函数定义为一个global变量，并在setTimeoutvariable函数中首先打开它几秒钟后使用它来关闭它。5此外，要打开一个选项卡/窗口，我们可以在其中使用window.open方法并打开一个新窗口。url_blank工作JSFiddle&nbsp;=&nbsp;https://jsfiddle.net/8L0jb3ef/现场工作示例：$(function() {&nbsp; $(".images").find("a").eq(1).on('click', function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; //Dialogue&nbsp; &nbsp; $("#dialog").dialog({&nbsp; &nbsp; &nbsp; autoOpen: false,&nbsp; &nbsp; &nbsp; open: function(e) {&nbsp; &nbsp; &nbsp; &nbsp; $('body').addClass('modal');&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; close: function(e) {&nbsp; &nbsp; &nbsp; &nbsp; $('body').removeClass('modal');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }).dialog("open");&nbsp; &nbsp; //Close dialogue after 5&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; //close dialogue&nbsp; &nbsp; &nbsp; $(dialog).dialog("close")&nbsp; &nbsp; &nbsp; //redirect to new window&nbsp; &nbsp; &nbsp; window.open($(this).prop("href"), "_blank", "height=600,width=600"); //new window&nbsp; &nbsp; }, 5000);&nbsp; });});#dialog {&nbsp; display: none;}img {&nbsp; width: 300px;&nbsp; height: 250px;&nbsp; object-fit: cover;}.modal {&nbsp; background-color: pink;}.modal:after {&nbsp; content: '';&nbsp; position: fixed;&nbsp; left: 0;&nbsp; top: 0;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; background-color: rgba(0, 0, 0, .7);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><script src=""></script><link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /><!-- Starting the HTML --><div class="modal-body">&nbsp; <div class="images">&nbsp; &nbsp; <a href="https://www.example.net">&nbsp; &nbsp; &nbsp; <img src="https://images.pexels.com/photos/5214132/pexels-photo-5214132.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">&nbsp; &nbsp; &nbsp; <a href="https://www.example2.net">&nbsp; &nbsp; &nbsp; &nbsp; <img src="https://images.pexels.com/photos/4995558/pexels-photo-4995558.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">&nbsp; &nbsp; &nbsp; </a>&nbsp; </div>&nbsp; <div id="dialog" title="Lorem ipsum">&nbsp; &nbsp; <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>&nbsp; </div></div>