Maison > Article > interface Web > Comment éliminer le bouton de fermeture dans une boîte de dialogue jQuery UI à l'aide de CSS ?

Comment éliminer le bouton de fermeture dans une boîte de dialogue jQuery UI à l'aide de CSS ?

PHPzavant: 2023-09-17 10:01:021546parcourir

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

Afficher les données dans un ordre trié dans des pages Web HTML est une tâche fastidieuse. Les boîtes de dialogue sont utilisées pour afficher des informations sous une forme présentable dans une page Web. Une boîte de dialogue est une fenêtre flottante contenant un titre et un contenu. jQuery UI permet aux développeurs de créer des boîtes de dialogue simples et conviviales pour les sites Web. Dans cet article, nous verrons comment créer des boîtes de dialogue jQuery UI et comment éliminer le bouton de fermeture dans ces boîtes.

Tout d’abord, comprenons la boîte de dialogue jQuery UI.

Boîte de dialogue de l'interface utilisateur jQuery

La méthode

jQuery Dialog() permet aux développeurs de créer une simple fenêtre de dialogue dans la fenêtre qui n'est pas affectée par le contenu de la page. dialog() method est utilisée pour indiquer au navigateur que n'importe quel élément HTML peut être affiché sous la forme d'une boîte de dialogue. Il se compose d'une barre de titre et d'un espace de contenu. Par défaut, il peut être déplacé, redimensionné et supprimé via le bouton de fermeture (x).

Grammaire

$(selector, context).dialog (options);

Paramètres

Titre− Il permet aux développeurs de décider du titre affiché dans la boîte de dialogue.
Largeur- Il permet aux développeurs de décider de la largeur de la boîte de dialogue.
Position- Il permet aux développeurs de décider de la position initiale de la boîte de dialogue.
Hauteur- Il permet aux développeurs de décider de la hauteur de la boîte de dialogue.
Button - Utilisé pour ajouter des boutons aux boîtes de dialogue.
Max-height - Détermine la hauteur maximale de la boîte de dialogue
Max-width - Détermine la largeur maximale de la boîte de dialogue
Min-height - Détermine la hauteur minimale de la boîte de dialogue
Min-width - Détermine la largeur minimale de la boîte de dialogue
Appendto - Lorsque cette option est définie sur false, elle nous permet d'empêcher l'ajout de la classe UIdraggable à la liste des éléments HTML DOM.
Ouvrir automatiquement - Lorsque cette option est laissée vraie, la boîte de dialogue s'ouvrira dès sa création. Si faux, une boîte de dialogue s'ouvrira lors de l'appel.

Étapes à suivre

Voici les étapes à suivre pour créer une boîte de dialogue JQuery.

Étape 1 - Ajoutez jQuery et jQuery UI CDN au code à l'intérieur de la balise <script>. Au lieu de cela, vous pouvez les télécharger sur votre système local. </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>

Étape 2 - Créez n'importe quel élément HTML qui sera la boîte de dialogue (comme div, p, etc.) et définissez son identifiant. Maintenant, créez une boîte de dialogue en utilisant la méthode jQuery UIdialog().

Étape 3 - Créez un bouton qui affichera la boîte de dialogue lorsque vous cliquez dessus. Écrivez une fonction pour ouvrir une boîte de dialogue lorsque vous cliquez sur la balise <script>. Définissez <b><i>autoopen: false pour que la boîte de dialogue s'ouvre lorsque vous cliquez sur le bouton. </script>

Étape 4 - Stylisez les boutons et les boîtes de dialogue en utilisant CSS.

Exemple

L'exemple suivant montre comment créer une simple boîte de dialogue 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>

Comme vous pouvez le voir, par défaut, nous affichons un bouton de fermeture dans la boîte de dialogue. Ensuite, si vous souhaitez supprimer le bouton de fermeture, nous utiliserons CSS.

Supprimer le bouton de fermeture de la boîte de dialogue de l'interface utilisateur jQuery

Définissez simplement la valeur de la propriété d'affichage de ui-dialog-titlebar-close sur none pour supprimer le bouton de fermeture de la boîte de dialogue jQuery UI.

Grammaire

.ui-dialog-titlebar-close {
   display: none;
}

Étapes à suivre

Voici les étapes à suivre

Étape 1 - Ajoutez jQuery et jQuery UI CDN au code à l'intérieur de la balise <script>. Au lieu de cela, vous pouvez les télécharger sur votre système local. </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>

Étape 4 - Utilisez CSS pour styliser les boutons et les boîtes de dialogue. Utilisez le sélecteur de classe ".ui-dialogtitlebar-close" et définissez sa propriété d'affichage sur none.

Exemple

L'exemple suivant montre comment éliminer le bouton de fermeture d'une boîte de dialogue 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>

Conclusion

Les boîtes de dialogue sont de petites fenêtres graphiques qui facilitent l'interaction de l'utilisateur. Il permet aux développeurs de communiquer avec les utilisateurs et de recevoir leurs réponses. Il existe plusieurs façons de créer de telles boîtes de dialogue. Dans cet article, nous créons une boîte de dialogue à l'aide de jQuery UI. De plus, nous avons également discuté des moyens de supprimer le bouton de fermeture (affiché par défaut) des boîtes de dialogue de l'interface utilisateur jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css html dom 选择器 display ui

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Styliser chaque élément activé à l'aide de CSSArticle suivant：Styliser chaque élément activé à l'aide de CSS

Articles Liés

Voir plus