Opción minHeight del cuadro de diálogo jQuery UI

La opción Dialog minHeight se utiliza para establecer la altura mínima que se puede establecer en el cuadro de diálogo. Por defecto, el valor es 150.

Sintaxis:

$( ".selector" ).dialog({
    minHeight : 150
});

Enfoque: Primero, agregue los scripts jQuery UI necesarios para su proyecto.

<enlace href = «https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css» rel = «hoja de estilo»>
<script src = «https://code. jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Ejemplo 1:

HTML

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet">
  
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>
  
    <script>
        $(function () {
            $("#gfg").dialog({
                autoOpen: false,
                minHeight: 300
            });
            $("#geeks").click(function () {
                $("#gfg").dialog("open");
            });
        });
    </script>
</head>
  
<body>
    <div id="gfg" title="GeeksforGeeks">
        Jquery UI| minHeight dialog option
    </div>
      
    <button id="geeks">Open Dialog</button>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
            rel="stylesheet">
  
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>
  
    <script>
        $(function () {
            $("#gfg").dialog({
                autoOpen: false,
                minHeight: 150
            });
            $("#geeks").click(function () {
                $("#gfg").dialog("open");
            });
        });
    </script>
</head>
  
<body>
    <div id="gfg" title="GeeksforGeeks">
        Jquery UI| minHeight dialog option
    </div>
      
    <button id="geeks">Open Dialog</button>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *