亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

顯示后關閉 jQueryUI 對話框并在新瀏覽器窗口中打開頁面

顯示后關閉 jQueryUI 對話框并在新瀏覽器窗口中打開頁面

茅侃侃 2023-02-24 16:30:22
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>
查看完整描述

1 回答

?
江戶川亂折騰

TA貢獻1851條經驗 獲得超5個贊

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>


查看完整回答
反對 回復 2023-02-24
  • 1 回答
  • 0 關注
  • 121 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號