Create a modal window to implement full texts [closed]

Question

Create a modal window to implement full texts [closed]

Navigation

#1 by (1 votes)

1

The problem is that I do not know how to create a modal where you assign the text of a div and show more of it, but taking into account that div you want to see the information.

This is my code:

#container{
  width: 100%;
  background: tan;
}

.paragraph{
  width: 250px;
  height: 100px;
  background: brown;
  color: white;
}

#boton{
  width: 200px;
  padding: 5px 0px;
  color: white;
  background: slateblue;
  text-align: center;
}

<div id="container">
  <div class="paragraph">
    <p>Primer párrafo resumido en la presentación (Primer bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Primer bloque)</p>
  </div>
  <div class="basic fixed top right"></div>
  <div id="boton">Ver mas</div>
</div>

<div id="container">
  <div class="paragraph">
    <p>Primer párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
  </div>
  <div class="basic fixed top right"></div>
  <div id="boton">Ver mas</div>
  
  <div id="container-fixed">
    <div id="salir">X</div> 
  </div>

</div>

Here part of an example:

After being "See more" (or in English " Read More "), I would like you to show the rest of your information in a modal fixed using jQuery. How could that be done?

New Project Image

This modal has position: fixed, but the size of the content over passes the screen height; in this case of a smarthones screen

How could this problem be solved, where the paragraph content between and can be done scroll The other detail is that the body launches its scroll as shown in the image

** Your HTML **

javascript jquery

asked by Gamez 25.04.2017 в 01:29

source

1 answer

List in object within object list is not updated Positioning of header, footer and aside?

score 1 · Accepted Answer

What you could do is that:

The modal is hidden by default (with CSS)

When clicking on a "Read more" button:

Put the contents of that container in the modal (with JS)

Show the modal (with JS or CSS)

For the modal content to be all visible (even the text that is invisible), force its display to block (with JS or CSS).

I'm going to assume that the modal is the div with id #container-fixed and I'll take it from where it is and put it outside the data containers, so it's generic. And then the code would look something like this:

// cuando se pulsa un boton
$(".boton").on("click", function(e) {
  // copiamos el código a una variable y lo ponemos en el cuerpo del modal
  var codigo = $(this).closest(".container").find(".paragraph").html();
  $("#contenido-modal").html(codigo);
  // mostramos el modal
  $("#container-fixed").addClass("active");
});

// cuando se pulsa en la X del modal
$("#salir").on("click", function(e) {
  // escondemos el modal
  $("#container-fixed").removeClass("active");
});

.container{
  width: 100%;
  background: tan;
}

.paragraph{
  width: 250px;
  height: 100px;
  background: brown;
  color: white;
}

.boton{
  width: 200px;
  padding: 5px 0px;
  color: white;
  background: slateblue;
  text-align: center;
}

/* CSS del modal: siempre fijo en el centro de la pantalla) */
#container-fixed {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:400px;
  background:#ffff00;
  /* escondido por defecto */
  display:none; 
  /* maximo 80% o muestra scroll */
  max-height:80%;
  overflow:auto;
}

#container-fixed.active {
  display:block; /* lo mostramos si activo */
}

/* forzamos que los p del modal sean visibles con !important */
#contenido-modal p {
  display:block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  <div class="paragraph">
    <p>Primer párrafo resumido en la presentación (Primer bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Primer bloque)</p>
  </div>
  <div class="basic fixed top right"></div>
  <div class="boton">Ver mas</div>
</div>

<div class="container">
  <div class="paragraph">
    <p>Primer párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
    <p style="display: none;">Segundo párrafo resumido en la presentación (Segundo bloque)</p>
  </div>
  <div class="basic fixed top right"></div>
  <div class="boton">Ver mas</div>
</div>


<div id="container-fixed">
  <div id="salir">X</div> 
  <div id="contenido-modal"></div>
</div>