在 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 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 – 創建一個按鈕，單擊該按鈕將顯示對話框。編寫函數以在 標記內單擊時打開對話框。設置autoopen: false，以便單擊按鈕時打開對話框。
第 4 步 – 使用 CSS 設計按鈕和對話框的樣式。
示例
以下示例說明如何創建簡單的 jQuery UI 對話框。
<!DOCTYPE html>
<html>
<head>
<title> jQuery UI Dialog Box </title>
<link 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 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 – 創建一個按鈕，單擊該按鈕將顯示對話框。編寫函數以在 標記內單擊時打開對話框。
步驟 4 – 使用 CSS 設計按鈕和對話框的樣式。使用類選擇器“.ui-dialogtitlebar-close”并將其顯示屬性設置為none。
示例
以下示例演示如何從 jQuery UI 對話框中消除關閉按鈕。
<!DOCTYPE html>
<html>
<head>
<title> jQuery UI Dialog Box </title>
<link 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 對話框中的關閉按鈕？的詳細內容，更多請關注www.92cms.cn其它相關文章！
