显示后关闭 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 = https://jsfiddle.net/8L0jb3ef/

现场工作示例：

$(function() {

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

    e.preventDefault();

    //Dialogue

    $("#dialog").dialog({

      autoOpen: false,

      open: function(e) {

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

      },

      close: function(e) {

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

      }

    }).dialog("open");

    //Close dialogue after 5

    setTimeout(() => {

      //close dialogue

      $(dialog).dialog("close")

      //redirect to new window

      window.open($(this).prop("href"), "_blank", "height=600,width=600"); //new window

    }, 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>