cari

Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menghapuskan butang tutup dalam dialog UI jQuery menggunakan CSS?

Bagaimana untuk menghapuskan butang tutup dalam dialog UI jQuery menggunakan CSS?

PHPz
PHPzke hadapan
2023-09-17 10:01:021561semak imbas

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

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

Kaedah

jQuery 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!

jquery css html dom 选择器 display ui
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Menggayakan setiap elemen yang didayakan menggunakan CSSArtikel seterusnya：Menggayakan setiap elemen yang didayakan menggunakan CSS

Artikel berkaitan

Lihat lagi