如何使用 CSS 消除 jQuery UI 對話框中的關閉按鈕？-css教學-PHP中文網

首頁

web前端

css教學

如何使用 CSS 消除 jQuery UI 對話框中的關閉按鈕？

PHPz

Sep 17, 2023 am 10:01 AM

如何使用 CSS 消除 jQuery UI 对话框中的关闭按钮？

在 HTML 網頁中以排序方式顯示資料是一項繁瑣的任務。對話方塊用於在網頁中以可呈現的方式顯示資訊。對話框是一個可浮動窗口，其中包含標題和內容。 jQuery UI 讓開發人員能夠為網站建立簡單且使用者友好的對話框。在本文中，我們將討論如何建立 jQuery UI 對話方塊以及如何消除這些方塊中的關閉按鈕。

首先，讓我們來了解一下 jQuery UI 對話框。

jQuery UI 對話框

jQuery Dialog() 方法使開發人員能夠在視口中建立一個簡單的對話框窗口，該窗口不受頁面內容的影響。 dialog() 方法用來告訴瀏覽器任何HTML元素都可以以對話方塊的形式顯示。它由標題列和內容空間組成。預設情況下，可以透過關閉按鈕 (x) 進行移動、調整大小和刪除。

文法

$(selector, context).dialog (options);

參數

標題− # 它讓開發人員能夠決定對話方塊中顯示的標題。
#寬度- 它使開發人員能夠決定對話方塊的寬度。
位置- 它使開發人員能夠決定對話方塊的初始位置。
高度- 它使開發人員能夠決定對話方塊的高度。
按鈕- 用於對話方塊新增按鈕。
Max-height - 決定對話框的最大高度
Max-width - 決定對話方塊的最大寬度
#Min-height - 決定對話方塊的最小高度
#Min-width - 決定對話方塊的最小寬度
#Appendto - 將此選項設為 false 時，它使我們能夠阻止 UIdraggable 類別新增到 HTML DOM 元素清單中。
自動開啟- 將此選項保留為 true 時，對話方塊將在建立後立即開啟。如果為 false，則呼叫時會開啟對話方塊。

應遵循的步驟

以下是建立 JQuery 對話方塊應遵循的步驟。

第 1 步 - 將 jQuery 和 jQuery UI CDN 加入到 <script> 標記內的程式碼中。相反，您也可以將它們下載到本機系統。 </script>

<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script> 
<script src= "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>

第 2 步 - 建立任何將成為對話方塊的 HTML 元素（如 div、p 等）並設定其 id。現在，使用 jQuery UIdialog() 方法建立一個對話框。

步驟 3 - 建立一個按鈕，按一下該按鈕將顯示對話方塊。編寫函數以在 <script> 標記內點擊時開啟對話方塊。設定<b><i>autoopen: false，以便在按一下按鈕時開啟對話方塊。 </script>

第 4 步 - 使用 CSS 設計按鈕和對話方塊的樣式。

範例

以下範例說明如何建立簡單的 jQuery UI 對話框。

<!DOCTYPE html>
<html>
<head>
   <title> jQuery UI Dialog Box </title>
   <link href= "http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jqueryui.css" rel= "stylesheet">
   <script src= "http://code.jquery.com/jquery-1.10.2.js"> </script>
   <script src= "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
   <style>
      .ui-widget-header,.ui-state-default, ui-button{
         background: green;
         border: 3px solid black;
         color: white;
         font-weight: 900;
         letter-spacing: 1px;
         font-family: helvetica;
      }
      #button{
         position: absolute;
         left: 40%;
         margin: 12px;
         padding: 12px;
         border: 2px solid black;
         font-weight: bold;
         letter-spacing: 1.5px;
      }
   </style>
   <script>
      $(function() {
         $("#demo").dialog({
            autoOpen: false,
         });
         $("#button").click(function() {
            $("#demo").dialog( "open" );
         });
      });
   </script>
</head>
<body>
   <div id= "demo" title= "Tutorialspoint"> An e-learning platform for Computer Science. </div>
   <button id= "button"> Show Dialog Box </button>
</body>
</html>

如您所見，預設情況下，我們在對話方塊上顯示一個關閉按鈕。接下來，如果你想刪除關閉按鈕，我們將使用CSS。

從 jQuery UI 對話方塊中刪除關閉按鈕

只需將 ui-dialog-titlebar-close 的 display 屬性值設為 none 即可刪除 jQuery UI 對話方塊中的關閉按鈕。

文法

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

應遵循的步驟

以下是要遵循的步驟

第 1 步 - 將 jQuery 和 jQuery UI CDN 加入到 <script> 標記內的程式碼中。相反，您也可以將它們下載到本機系統。 </script>

<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script>
<script src= "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>

第 2 步 - 建立任何將成為對話方塊的 HTML 元素（如 div、p 等）並設定其 id。現在，使用 jQuery UIdialog() 方法建立一個對話框。

步驟 3 - 建立一個按鈕，按一下該按鈕將顯示對話方塊。編寫函數以在 <script> 標記內點擊時開啟對話方塊。 </script>

步驟 4 - 使用 CSS 設計按鈕和對話方塊的樣式。使用類別選擇器“.ui-dialogtitlebar-close”並將其顯示屬性設為none。

範例

以下範例示範如何從 jQuery UI 對話方塊中消除關閉按鈕。

<!DOCTYPE html>
<html>
<head>
   <title> jQuery UI Dialog Box </title>
   <link href= "http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jqueryui.css" rel= "stylesheet">
   <script src= "http://code.jquery.com/jquery-1.10.2.js"> </script>
   <script src= "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
   <style>
      .ui-widget-header,.ui-state-default, ui-button{
         background: green;
         border: 3px solid black;
         color: white;
         font-weight: 900;
         letter-spacing: 1px;
         font-family: helvetica;
      }
      #button{
         position: absolute;
         left: 40%;
         margin: 12px;
         padding: 12px;
         border: 2px solid black;
         font-weight: 900;
         letter-spacing: 1.5px;
      }
      .ui-dialog-titlebar-close {
         display: none;
      }
   </style>
   <script>
      $(function() {
         $("#demo").dialog({
            autoOpen: false,
         });
         $("#button").click(function() {
            $("#demo").dialog( "open" );
         });
      });
   </script>
</head>
<body>
   <div id= "demo" title= "Tutorialspoint"> An e-learning platform for Computer Science. </div>
   <button id= "button"> Show Dialog Box </button>
</body>
</html>