0

Ando buscando que el modals que aparece al dar click en ( Ver mas ) Llamado como SEE en ingles; tenga un boton subir, justo al final del modal

$(document).ready(function(){
  $('.see').click(function(e){
    var title_poster_fixed = $(this).closest('.poster').find('.title_poster').html();
    var all_paragraph = $(this).closest(".poster").find(".contents_paragraph").html();

    $('.title_poster_fixed').html(title_poster_fixed);
    $('.contents_paragraph_fixed').html(all_paragraph);

    $('body').css("overflow","hidden");
    $('.showing_information').addClass("active");
  });

  $('.exit-poster').click(function(){
    $('.showing_information').removeClass('active');
    $('body').css("overflow","auto");
  });
  });
/*■■■■■■■■■■■■■■■■■■■■■■■ SECTION BODY ■■■■■■■■■■■■■■■■■■■■■■■■■*/
.hgroup{text-align: center;padding: 40px 0px 30px;}
.poster{
  width: 90%;
  z-index: 1000;
  font-size: 2rem;
  padding-bottom: 5px;
  margin-bottom: 2.9rem;
  box-sizing: border-box;
  background: rgb(242, 241, 242);
  box-shadow: 0px 1px 2px hsla(360, 100%, 00%, 0.5);
}
.title_poster{
  font-size: 1.5rem;
  padding: 10px 0px;
  text-align: center;
  border-bottom: 1px solid hsla(360, 100%, 0%, 0.1);
}
.title_poster .title_poster_fixed{margin-top: 40px;padding: 20px;box-sizing: border-box;}
.contents_paragraph{
  height: 205px;
  overflow:hidden;
  font-size: 1.2rem;
  padding: 5px 15px 0px 15px;
}
.see{
  padding: 7px;
  cursor: pointer;
  font-size: 1.2rem;
  margin: 1rem 1rem;
  text-align: center;
  color: white;
  transition: all 0.3s;
  border-radius: 1.25rem;
  background: hsla(343,52%,26%,1);
}
.see:hover{
  background: hsla(343,52%,21%,1);
}
.showing_information{
  top: 0;
  width: 100%;
  height: 1000px;
  z-index: 1001;
  position: fixed;
  box-sizing: border-box;
  background: rgb(242, 241, 242);
  display:none; /* escondido por defecto */
  max-height:100%;
  overflow:auto;
}
.showing_information.active {
  display:block; /* lo mostramos si activo */
}
.contents_paragraph_fixed{
  padding: 20px 20px;
  font-size: 1.2rem;
  text-align: justify;
}
.contents_paragraph_fixed p{
  display:block !important;
}
.exit-poster{
  right: 40;
  height: 35px;
  padding-top: 10px;
}
.exit-poster,.subir_poster{
  width: 60px;
  color: white;
  cursor: pointer;
  position: absolute;
  text-align: center;
  transition: all .3s;
  background: rgb(142, 57, 159);
}
.exit-poster:hover{
  background: none;
  color: rgb(142, 57, 159);
  max-height: 100%;
  box-shadow: 0px 1px  4px rgb(142, 57, 159) inset;
}
.subir_poster{
  right: 40;
  position: fixed;
  bottom: -100%;top: -100%;
  padding-top: 10px;
  z-index: 1002;
  height: 40px;
}
/*■■■■■■■■■■■■■■■■■■■■■■■ FIN SECTION BODY ■■■■■■■■■■■■■■■■■■■■■■■■■*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
          <article class="poster">
            <header class="title_poster">Historia</header>
            <div class="contents_paragraph">
              <p class="fonts-4 paragraph-short">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud---- </p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <p class="fonts-4" style="display:none;">exercitati 9999999 9999 on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="see color-1">Ver más</div>
          </article>
          <article class="poster">     <!--// Poster = cartel -->
            <header class="title_poster">Historia 2</header>     <!--// title_poster = titulo del cartel-->
            <div class="contents_paragraph">     <!--// contents_paragraph = Container del Parrafo-->
              <p class="fonts-4 paragraph-short">Lorem 2 ipsum dolor sit amet, consectetur adipisicing elit, sed do ei usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud---- </p>
              <p class="fonts-4" style="display:none"> 44 exercitation 2 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="see color-1">Ver más</div>
          </article>


          <div class="showing_information">     <!--//showing_information = Mostrando Informacion-->
            <article class="contents_information">      <!--// contents_paragraph = Container del Parrafo-->
              <div class="exit-poster fonts-1">X</div> <!--// salir X -->
              <header class="title_poster">
                <div class="title_poster_fixed"></div>
              </header>
              <div class="contents_paragraph_fixed"></div>
              <div class="subir_poster font-4">^</div>
            </article>
          </div>



        </section>

3
  • Ya tengo una respuesta publicada sobre esa misma situación. Te mando el link, espero te ayude. es.stackoverflow.com/questions/64158/…
    – Ric_hc
    el 25 abr. 2017 a las 20:10
  • no manches men, no es un duplicado ya que busco otras cosas diferentes como hacer un link a un ( link que tenga un titulo y su funcion es desplazarme hasta ese contenido para no scrolear )
    – Gamez
    el 25 abr. 2017 a las 20:16
  • Si es duplicado, de verdad. En realidad el scroll no es hasta la parte superior de la pantalla, sino al lugar donde hayas definido tu anchor y hasta ese punto se desplaza. Inténtalo, verás que si funciona con un poco de adaptación.
    – toledano
    el 25 abr. 2017 a las 20:19

0

Examina otras preguntas con la etiqueta o formula tu propia pregunta.