資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律如何使用 CSS 從 jQuery UI 對話方塊中刪除關閉按鈕？
在 HTML 網頁中以排序的方式顯示資料是一項繁瑣的任務。對話方塊用於以易於閱讀的方式在網頁中顯示資訊。對話方塊是一個浮動視窗，包含標題和內容。jQuery UI 使開發人員能夠為網站建立簡單易用的對話方塊。在本文中，我們將討論如何建立 jQuery UI 對話方塊以及如何從這些框中刪除關閉按鈕。
首先，讓我們瞭解一下 jQuery UI 對話方塊。
jQuery UI 對話方塊
jQuery Dialog() 方法使開發人員能夠建立一個簡單的對話方塊視窗，該視窗存在於視口中，並受到頁面內容的保護。dialog() 方法用於告訴瀏覽器任何 HTML 元素都可以以對話方塊的形式顯示。它由一個標題欄和一個內容空間組成。預設情況下，它可以透過關閉按鈕 (x) 移動、調整大小和刪除。
語法
$(selector, context).dialog (options);
引數
標題 − 它使開發人員能夠決定將在對話方塊中顯示的標題。
寬度 − 它使開發人員能夠決定對話方塊的寬度。
位置 − 它使開發人員能夠決定對話方塊的初始位置。
高度 − 它使開發人員能夠決定對話方塊的高度。
按鈕 − 用於向對話方塊新增按鈕。
最大高度 − 確定對話方塊的最大高度
最大寬度 − 確定對話方塊的最大寬度
最小高度 − 確定對話方塊的最小高度
最小寬度 − 確定對話方塊的最小寬度
附加到 − 將此選項設定為 false 時，它使我們能夠防止 UIdraggable 類新增到 HTML DOM 元素列表中。
自動開啟 − 將此選項保留為 true 時，對話方塊在建立後立即開啟。而如果為 false，則對話方塊將在呼叫時開啟。
步驟
以下是建立 JQuery 對話方塊需要遵循的步驟。
步驟 1 − 在 <script> 標記內將 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 UI dialog() 方法建立一個對話方塊。
步驟 3 − 建立一個按鈕，單擊該按鈕將顯示您的對話方塊。在 <script> 標記內編寫在單擊時開啟對話方塊的函式。設定 autoopen: false，以便在單擊按鈕時開啟對話方塊。
步驟 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 − 在 <script> 標記內將 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 UI dialog() 方法建立一個對話方塊。
步驟 3 − 建立一個按鈕，單擊該按鈕將顯示您的對話方塊。在 <script> 標記內編寫在單擊時開啟對話方塊的函式。
步驟 4 − 使用 CSS 樣式化您的按鈕和對話方塊。使用類選擇器“.ui-dialogtitlebar-close”並將它的 display 屬性設定為 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 對話方塊中刪除預設顯示的關閉按鈕的方法。
2K+ 閱讀量
