如何使用 CSS 消除 jQuery UI 對話框中的關閉按鈕？
- PHPz轉載
- 2023-09-17 10:01:021576瀏覽
在 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>
結論
對話方塊是有助於使用者互動的小型圖形視窗。它使開發人員能夠與用戶溝通並接收他們的回應。有多種方法可以建立此類對話框。在本文中，我們使用 jQuery UI 建立一個對話框。另外，我們也討論了從 jQuery UI 對話方塊中刪除關閉按鈕（預設顯示）的方法。
以上是如何使用 CSS 消除 jQuery UI 對話框中的關閉按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！