hujung hadapan webtutorial cssBagaimana untuk menghapuskan butang tutup dalam dialog UI jQuery menggunakan CSS?Bagaimana untuk menghapuskan butang tutup dalam dialog UI jQuery menggunakan CSS?
Memaparkan data dalam susunan disusun dalam halaman web HTML adalah tugas yang membosankan. Kotak dialog digunakan untuk memaparkan maklumat dalam bentuk yang boleh dilihat dalam halaman web. Kotak dialog ialah tetingkap boleh terapung yang mengandungi tajuk dan kandungan. UI jQuery membolehkan pembangun mencipta kotak dialog yang mudah dan mesra pengguna untuk tapak web. Dalam artikel ini, kami akan membincangkan cara membuat kotak dialog UI jQuery dan cara menghapuskan butang tutup dalam kotak ini.
Pertama, mari kita fahami kotak dialog UI jQuery.
Dialog UI jQuery
KaedahjQuery Dialog() membolehkan pembangun mencipta tetingkap dialog mudah dalam port pandangan yang tidak terjejas oleh kandungan halaman. dialog() method digunakan untuk memberitahu pelayar bahawa sebarang elemen HTML boleh dipaparkan dalam bentuk kotak dialog. Ia terdiri daripada bar tajuk dan ruang kandungan. Secara lalai, ia boleh dialihkan, diubah saiz dan dipadamkan melalui butang tutup (x).
Tatabahasa
$(selector, context).dialog (options);
Parameter
Tajuk− Ia membolehkan pembangun menentukan tajuk yang dipaparkan dalam kotak dialog.
Width- Ia membolehkan pembangun menentukan lebar kotak dialog.
Position- Ia membolehkan pembangun menentukan kedudukan awal dialog.
Ketinggian- Ia membolehkan pembangun menentukan ketinggian kotak dialog.
Butang - Digunakan untuk menambah butang pada kotak dialog.
Max-height - Tentukan ketinggian maksimum kotak dialog
Max-width - Tentukan lebar maksimum kotak dialog
Min-height - Tentukan ketinggian minimum kotak dialog
Min-lebar - Tentukan lebar minimum kotak dialog
Lampirkan - Apabila pilihan ini ditetapkan kepada palsu, ia membolehkan kami menghalang kelas UIdraggable daripada ditambahkan pada senarai elemen DOM HTML.
Buka secara automatik - Apabila pilihan ini dibiarkan benar, kotak dialog akan dibuka sebaik sahaja ia dibuat. Jika palsu, kotak dialog akan dibuka apabila dipanggil.
Langkah untuk diikuti
Berikut ialah langkah yang perlu anda ikuti untuk mencipta kotak dialog JQuery.
Langkah 1 - Tambahkan jQuery dan jQuery UI CDN pada kod di dalam teg <script>. Sebaliknya, anda boleh memuat turunnya ke sistem setempat anda. </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>
Langkah 2 - Buat sebarang elemen HTML yang akan menjadi dialog (seperti div, p, dsb.) dan tetapkan idnya. Sekarang, buat dialog menggunakan kaedah jQuery UIdialog().
Langkah 3 - Buat butang yang akan memaparkan dialog apabila diklik. Tulis fungsi untuk membuka kotak dialog apabila diklik di dalam teg <script>. Tetapkan <b><i>autoopen: false supaya dialog terbuka apabila butang diklik. </script>
Langkah 4 - Gayakan butang dan kotak dialog menggunakan CSS.
Contoh
Contoh berikut menunjukkan cara mencipta kotak dialog UI jQuery yang mudah.
<!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>
Seperti yang anda lihat, secara lalai kami menunjukkan butang tutup pada dialog. Seterusnya, jika anda ingin mengalih keluar butang tutup, kami akan menggunakan CSS.
Alih keluar butang tutup daripada dialog UI jQuery
Hanya tetapkan nilai sifat paparan ui-dialog-titlebar-close kepada tiada untuk mengalih keluar butang tutup daripada dialog UI jQuery.
Tatabahasa
.ui-dialog-titlebar-close {
display: none;
}
Langkah untuk diikuti
Berikut adalah langkah yang perlu diikuti
Langkah 1 - Tambahkan jQuery dan jQuery UI CDN pada kod di dalam teg <script>. Sebaliknya, anda boleh memuat turunnya ke sistem setempat anda. </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>
Langkah 2 - Buat sebarang elemen HTML yang akan menjadi dialog (seperti div, p, dsb.) dan tetapkan idnya. Sekarang, buat dialog menggunakan kaedah jQuery UIdialog().
Langkah 3 - Buat butang yang akan memaparkan dialog apabila diklik. Tulis fungsi untuk membuka kotak dialog apabila diklik di dalam teg <script>. </script>
Langkah 4 - Gunakan CSS untuk menggayakan butang dan kotak dialog. Gunakan pemilih kelas ".ui-dialogtitlebar-close" dan tetapkan sifat paparannya kepada tiada.
Contoh
Contoh berikut menunjukkan cara untuk menghapuskan butang tutup daripada dialog UI jQuery.
<!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>
Kesimpulan
Kotak dialog ialah tetingkap grafik kecil yang memudahkan interaksi pengguna. Ia membolehkan pembangun berkomunikasi dengan pengguna dan menerima respons mereka. Terdapat beberapa cara untuk mencipta kotak dialog tersebut. Dalam artikel ini, kami mencipta dialog menggunakan UI jQuery. Selain itu, kami juga membincangkan cara untuk mengalih keluar butang tutup (dipaparkan secara lalai) daripada kotak dialog UI jQuery.
Atas ialah kandungan terperinci Bagaimana untuk menghapuskan butang tutup dalam dialog UI jQuery menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Begitu banyak pautan warnaApr 13, 2025 am 11:36 AMDi sana ' s telah menjalankan alat, artikel, dan sumber tentang warna akhir -akhir ini. Tolong izinkan saya menutup beberapa tab dengan membulatkannya di sini untuk keseronokan anda.
Bagaimana margin automatik berfungsi di flexboxApr 13, 2025 am 11:35 AMRobin telah menutupi ini sebelum ini, tetapi saya telah mendengar kekeliruan mengenainya dalam beberapa minggu yang lalu dan melihat orang lain menikam menerangkannya, dan saya mahu
Melangkah Rainbow Garis bawahApr 13, 2025 am 11:27 AMSaya sangat suka reka bentuk tapak sandwic. Di antara banyak ciri yang indah ialah tajuk utama ini dengan garis bawah Rainbow yang bergerak ketika anda menatal. Ia ' s tidak
Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!Apr 13, 2025 am 11:26 AMBanyak reka bentuk resume yang popular membuat sebahagian besar ruang halaman yang tersedia dengan meletakkan bahagian dalam bentuk grid. Mari kita gunakan grid CSS untuk membuat susun atur yang
Salah satu cara untuk memecahkan pengguna dari kebiasaan tambah nilai terlalu banyakApr 13, 2025 am 11:25 AMTambah nilai halaman adalah satu perkara. Kadang -kadang kita menyegarkan halaman apabila kita fikir ia tidak bertindak balas, atau percaya bahawa kandungan baru tersedia. Kadang -kadang kita hanya marah
Reka bentuk yang didorong oleh domain dengan ReactApr 13, 2025 am 11:22 AMTerdapat panduan yang sangat sedikit tentang cara mengatur aplikasi front-end di dunia React. (Hanya gerakkan fail sehingga ia "terasa betul," lol). Kebenaran
Mengesan pengguna yang tidak aktifApr 13, 2025 am 11:08 AMKebanyakan masa anda tidak benar -benar peduli sama ada pengguna secara aktif terlibat atau tidak aktif sementara pada aplikasi anda. Tidak aktif, makna, mungkin mereka
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo sentiasa hebat dengan integrasi. Mereka mempunyai integrasi dengan aplikasi tertentu, seperti Monitor Kempen, MailChimp, dan TypeKit, tetapi mereka juga
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
