¿Cómo cambiar la posición del botón de cierre modal en bootstrap?

Posted on by Rudeus Greyrat

El componente modal es un cuadro de diálogo o una ventana emergente que se muestra en la parte superior de la página. Los modales se pueden usar como ventanas de alerta, así como para aceptar algunos valores de entrada.

Ejemplo de un modal básico: Para cambiar la posición del botón de cerrar, necesitamos crear un elemento modal. El siguiente código creará un modal muy básico.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Modal Closing Button</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <meta content="text/html;charset=utf-8"
        http-equiv="Content-Type"/>
    <meta content="utf-8"
        http-equiv="encoding"/>
    <!-- Jquery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
    </script>
    <!-- Personalized Includes -->
    <!-- CSS -->
    <style>
        .center {
            margin: 0 auto;
            text-align: center;
            justify-content: center;
        }
        .btn-div {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="modal fade" id="main-modal">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header" id="modal-header">
                    <h4 class="modal-title" id="modal-title">
                        Modal Heading
                    </h4>
                    <button type="button" class="close"
                        data-dismiss="modal">
                        ×
                    </button>
                </div>
                <!-- Modal body -->
                <div class="modal-body" id="modal-body">
                    Modal Body
                </div>
                <!-- Modal footer -->
                <div class="modal-footer" id="modal-footer">
                    Modal Footer
                </div>
            </div>
        </div>
    </div>
    <div class="center btn-div">
        <div>
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/GeeksforGeeksLogoHeader.png"
                class="img-fluid"/>
        </div>
        <br/>
        <button class="btn btn-success"
            data-toggle="modal" data-target="#main-modal">
            Open Modal
        </button>
    </div>
</body>
</html>

Producción: 
 


Approach: In the above, you can observe a button with class = “close” inside the modal header. This button is used for closing the modal element. data-dismiss property is used to switch the display style of the modal element. 

<button type="button" class="close" data-dismiss="modal">
      &times;
</button>
  • &veces; da el icono de cruz.
  • data-dismiss cambia la propiedad de visualización del elemento modal de «bloquear» a «ninguno».
  • Puede cambiar la descripción de este botón del encabezado a cualquier ubicación dentro de toda la división modal para mover el botón de cierre, o puede declarar su propio botón de cierre adicional.

A continuación se muestran los métodos de implementación para los pasos anteriores.

Método 1: Mueva la descripción del botón.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Modal Closing Button</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <meta content="text/html;charset=utf-8"
        http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <!-- Jquery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
    </script>
    <!-- Personalized Includes -->
    <!-- CSS -->
    <style>
        .center {
            margin: 0 auto;
            text-align: center;
            justify-content: center;
        }
        .btn-div {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="modal fade" id="main-modal">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header" id="modal-header">
                    <h4 class="modal-title" id="modal-title">
                        Modal Heading
                    </h4>
                    <!--Button shifted from here...-->
                </div>
                <!-- Modal body -->
                <div class="modal-body" id="modal-body">
                    Modal Body
                    <!--Button shifted to this place...-->
                    <button type="button"
                        class="close" data-dismiss="modal">
                        ×
                    </button>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer" id="modal-footer">
                    Modal Footer
                </div>
            </div>
        </div>
    </div>
    <div class="center btn-div">
        <div>
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/GeeksforGeeksLogoHeader.png"
                class="img-fluid"/>
        </div>
        <br/>
        <button class="btn btn-success"
            data-toggle="modal" data-target="#main-modal">
            Open Modal
        </button>
    </div>
</body>
</html>

Salida: el botón aparece en la sección del cuerpo del elemento modal ya que se mueve a la sección del cuerpo.

Método 2: defina su propio botón de cierre utilizando la propiedad de desestimación de datos .

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Modal Closing Button</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <meta content="text/html;charset=utf-8"
        http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <!-- Jquery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
    </script>
    <!-- Personalized Includes -->
    <!-- CSS -->
    <style>
        .center {
            margin: 0 auto;
            text-align: center;
            justify-content: center;
        }
        .btn-div {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="modal fade" id="main-modal">
        <div class="modal-dialog
              modal-dialog-centered modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header" id="modal-header">
                    <h4 class="modal-title" id="modal-title">
                        Modal Heading
                    </h4>
                    <button type="button" class="close"
                        data-dismiss="modal">
                        ×
                    </button>
                </div>
                <!-- Modal body -->
                <div class="modal-body" id="modal-body">
                    Modal Body
                </div>
                <!-- Modal footer -->
                <div class="modal-footer" id="modal-footer">
                    Modal Footer
                    <!--New Button declared here...-->
                    <button class="btn btn-danger"
                        data-dismiss="modal">
                        Close Modal
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="center btn-div">
        <div>
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/GeeksforGeeksLogoHeader.png"
                class="img-fluid" />
        </div>
        <br/>
        <button class="btn btn-success"
            data-toggle="modal"
            data-target="#main-modal">
            Open Modal
        </button>
    </div>
</body>
</html>

Salida: un nuevo botón de cierre está disponible en la sección de pie de página modal. 

Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por chitrankmishra 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 *