使用戶訪問彈出窗口

Question

我想在用戶訪問https://demo.infyways.com/demo/popup-and-iframes/website-disclaimer-popup 時制作一個立即出現在網站中間的彈出窗口

這是我想要但更改彈出背景的示例站點。 我知道這個站點是一個彈出窗口生成器，但是每當我復制代碼生成時，我都會在我的站點頂部顯示我的 msg 我只想要在用戶訪問時彈出窗口

這是我試圖使用查詢實現的一個非常平凡的例子

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">.  </script>
    <script>
    $( function() {
   $( "#dialog" ).dialog();
  } );
 </script>

<div id="dialog" title="Basic dialog">
 <p>This is the default dialog which is useful for displaying     information. The dialog window can 
 be moved, resized and closed with the      'x' icon.</p>
 </div>

我似乎無法從中刪除關閉選項並設置它以便用戶如果不接受就無法繼續。 我想創建 2 個按鈕 1 以表示同意 -> 用戶繼續訪問我的網站，如果他不同意，則該網站不可見 第二個按鈕不同意，並且只有一個空白頁面 我可以使用查詢還是浪費時間來同意或不同意按鈕

Answer 1

你不會只是隱藏按鈕嗎？

• 要么使用高特異性：

 .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { display: none; }

• 或者強制它，使用重要的：

 .ui-dialog-titlebar-close { display: none !important; }

例子

 $(() => { $("#dialog").dialog(); });

 .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close { display: none; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div>

---

更新

如果您想吸引用戶的注意力，我會將窗口設為模態。

 $(() => { $('#dialog').dialog({ modal: true, dialogClass: 'no-close', buttons: [{ text: 'Accept', click: function() { $(this).dialog('close'); // Log the acceptance of aggreement, and continue... } }, { text: 'Decline', click: function() { $(this).dialog('close'); window.location = null; // Take the user somewhere else. } }] }); });

 .no-close .ui-dialog-titlebar-close { display: none; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <h1>Content Title</h1> <p>This content isn't accessible, unless you've agreed.</p> <div id="dialog" title="Attention!"> <p>This site tracks everything you do.</p> <p>Do you accept?</p> </div>

Answer 2

來自jQuery UI API 文檔

隱藏關閉按鈕

在某些情況下，您可能希望隱藏關閉按鈕，例如，如果按鈕窗格中有關閉按鈕。 實現這一點的最佳方法是通過 CSS。 例如，您可以定義一個簡單的規則，例如：

 .no-close .ui-dialog-titlebar-close { display: none; }

然后，您可以簡單地將 no-close 類添加到任何對話框以隱藏其關閉按鈕：

 $( "#dialog" ).dialog({ dialogClass: "no-close", buttons: [ { text: "OK", click: function() { $( this ).dialog( "close" ); } } ] });