Quiero mostrar los contenidos de un DIV como un diálogo modal usando jQuery.

¿Hay alguna forma de hacerlo sin usar Bootstrap o nada más ...?

Quiero personalizar mi diálogo modal, a mi manera, a través de CSS.

Por favor, muéstrame un camino ...

0
Bahram 27 jun. 2019 a las 21:06

1 respuesta

La mejor respuesta

Para "Roll-Your-Your-Own", el diálogo modal, todo lo que necesita son dos divs:

  1. La superposición: se encuentra en la parte superior de su contenido de página (usamos z-index para lograr esto)

  2. El diálogo: se sienta en la parte superior del div

Aquí hay un ejemplo de código básico.

$('#mybutt').click(function(){
    $('#myOverlay').show();
    $('#myModal').show();
});

$('#shutme, #myOverlay').click(function(){
    $('#myModal').hide();
    $('#myOverlay').hide();
});
#content{background:wheat;}
#myOverlay{position:fixed;top:0;left:0;height:100%;width:100%;background:black;opacity:0.7;display:none;z-index:1;}
#myModal{position:fixed;top:10%;left:10%;border:3px solid darkcyan;display:none;z-index:2;}
#shutme{position:absolute;right:20px;bottom:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="mybutt">Show Modal</button>
<div id="myOverlay"></div>
<div id="myModal">
    <img src="http://placekitten.com/450/325" />
    <input type="button" id="shutme" value="Close" />
</div>
<div id="content">
    This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. This is a bunch of content. 
</div>

jsfiddle demo


Notas importantes:

  1. z-index no funciona en elementos que utilizan el valor de posición predeterminado CSS (position:static). Si no necesita el elemento configurado en absolute o fixed, luego configúrelo a position:relative (que es prácticamente igual que el valor predeterminado static, pero también Admite z-index).

  2. position es nuevamente importante para la estructura HTML del cuadro de diálogo. Nuevamente, cámbielo desde el valor predeterminado de position:static. Un valor de posición de fixed lo colocará en una ubicación fija en la pantalla , mientras que absolute le permitirá posicionarlo en cualquier lugar dentro de la primera El elemento principal que no tiene un valor position de static (puede ver que el valor Pesky position:static es problemático: es una maravilla por qué se eligió ser el valor predeterminado.

  3. El DIV de Overlay está configurado, utilizando Z-index, para sentarse en la parte superior de la página web. Hacemos esto por dos razones: (1) para enmarcar bien el cuadro de diálogo, visualmente; y (2) para evitar que el usuario interactúe con la página hasta que se cierre el cuadro de diálogo. (Recuerde: position:absolute o position:fixed) Un buen efecto es hacer que este DIV semitransparente, utilizando la propiedad opacity CSS.

  4. El DIALOG DIV está configurado, utilizando Z-index, para sentarse en la parte superior de la superposición. No ponga el Diálogo DIV dentro del DIV de Overlay. Puedes hacer esto, pero es un poco más difícil, hacerlo de esta manera primero, luego experimenta con otras posibilidades.

  5. Es conveniente colocar la superposición y las estructuras DIV de diálogo ya sea en la parte superior del cuerpo, o en la parte inferior. No los coloques dentro de los contenedores. Si está utilizando Bootstrap, usted puede Use este método, pero no necesita que desde bootstrap tiene su propia estructura de diálogo modal que hace que sea un poco más fácil configurar un diálogo modal súper fresco. Si observa su HTML de cerca, verá que es realmente exactamente el mismo concepto que estamos usando aquí, solo hace más.

  6. No necesita un modal separado para cada mensaje. Es bastante simple intercambiar información dentro y fuera de la estructura de diálogo modal. Consulte esta respuesta para más ideas y demostraciones.

De hecho, esta es una idea clave, por lo que aquí hay otro ejemplo que muestra lo simple que es hacer:

$('[id^=mybutt]').click(function(){
    //above selector traps clicks on els where: id "starts with" mybutt
    let btnID = $(this).attr('id');
    let mdlNo = btnID.split('_')[1];
    $('#content_num').val(mdlNo); //Store so can put the data back when done
    //below line MOVES data from numbered storage div into the modal for display
    $('#content_mdl' + mdlNo + ' .mdl_content').appendTo( $('#myMdlInner') );
    $('#myOverlay').show();
    $('#myModal').show();
});

$('#shutme, #myOverlay').click(function(){
    $('#myModal').hide();
    $('#myOverlay').hide();
    let mdlNo = $('#content_num').val(); //get the stored mdl_data number
    //below line MOVES the dialog contents back to the appropriate storage div
    $('#myMdlInner .mdl_content').appendTo( $('#content_mdl' + mdlNo) );
});
#myOverlay{position:fixed;top:0;left:0;height:100%;width:100%;background:black;opacity:0.7;display:none;z-index:1;}

#myModal{position:fixed;top:10%;left:10%;width:70%;height:60%;border:3px solid darkcyan;overflow:hidden;display:none;z-index:2;}
  .mdl_content{height:100%;width:100%;background:white;}

#shutme{position:absolute;right:20px;bottom:20px;}

.flex-parent{display:flex;justify-content:center;align-items:center;}
.mdl_data{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>This demo re-uses one modal dialog for multiple content</h1>
<div id="myOverlay"></div>
<div id="myModal">
    <div id="myMdlInner"></div>
    <input type="button" id="shutme" value="Close" />
    <input type="hidden" id="content_num" />
</div>

<!-- Hidden divs containing content for the modal dialog -->
<div id="content_mdl1" class="mdl_data">
  <div class="mdl_content">
    <img src="http://placekitten.com/450/325" />
  </div><!-- .mdl_content -->
</div><!-- #content_mdl1 -->

<div id="content_mdl2" class="mdl_data">
  <div class="mdl_content">
    <div class="flex-parent">
        <div class="fleft">Some text goes here. Some text goes here. Some text goes here. </div>
        <div class="fright">
            <img src="http://placekitten.com/200/150" />
        </div>
    </div>
  </div><!-- .md2_content -->
</div><!-- #content_mdl2 -->

<button id="mybutt_1">Show Modal 1</button>
<button id="mybutt_2">Show Modal 2</button>

jsfiddle Demo

1
cssyphus 27 jun. 2019 a las 20:29