entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Como mantener el modal en el botón al re-dimensionar la ventana?

Hola amigos.Hace tiempo estuve buscando algo como esto.Bueno,me lo facilitaron,pero tengo un problema mas. Verán cuando pulso el botón me sale un tooltip o mejor dicho una ventana modal debajo del botón.

Cual es el problema?

El problema esta en que si tengo activado el modal y quiero re-dimensionar la ventana este(el modal) se queda en su mismo sitio y no se mueve.

HTML

<button class="btn pink rounded" toggle="tooltip" target="#hacer-algo">
  ★
</button>

<div tooltip status="hidden" id="hacer-algo">
  <header>
    <p>Favoritos</p>
  </header>
  <section class="body">
    <h3>
      ¿Desea agregar a favoritos?
    </h3>

    <form name="registrationForm">
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
    <input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>

    <section class="buttons">
      <button class="btn outline green">
        Confirmar
      </button>
    </section>
  </section>
</div>

CSS

@import "https://fonts.googleapis.com/css?family=Lato:400,700";
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2rem;
}

.btn {
  background: -webkit-linear-gradient(top, #fbfbfb, #f5f5f5);
  background: linear-gradient(to bottom, #fbfbfb, #f5f5f5);
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.15);
  color: #222;
  cursor: pointer;
  font-family: 'lato';
  font-size: .9rem;
  padding: .5rem 1rem;
  -webkit-transition: box-shadow .2s ease;
  transition: box-shadow .2s ease;
}
.btn:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn:focus {
  outline: none;
}
.btn.rounded {
  border-radius: 100%;
  height: 40px;
  padding: .4rem 0;
  text-align: center;
  width: 40px;
}
.btn.green {
  background: #16a085;
  border-color: #16a085;
  color: #fff;
}
.btn.green.outline {
  background-color: #fff;
  border: none;
  color: #16a085;
  box-shadow: none;
  font-weight: 600;
  text-transform: uppercase;
}
.btn.green.outline:hover {
  box-shadow: none;
}
.btn.pink {
  background: #F62459;
  border-color: #F62459;
  color: #fff;
}

[tooltip] {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.1);
  display: inline-block;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  -webkit-transition: opacity .2s ease, visibility .2s ease, -webkit-transform .2s ease;
  transition: opacity .2s ease, visibility .2s ease, -webkit-transform .2s ease;
  transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
  transition: transform .2s ease, opacity .2s ease, visibility .2s ease, -webkit-transform .2s ease;
  visibility: hidden;
}
[tooltip] header {
  background-color: #f2f2f2;
  border-bottom: 1px solid #e8e8e8;
  padding: .25rem .8rem;
}
[tooltip] header p {
  color: #222;
  font-family: 'lato';
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
[tooltip] .body {
  padding: .7rem 1rem;
}
[tooltip] .body h3 {
  font-family: 'lato';
  font-size: 17px;
  font-weight: 400;
  text-align: center;
}
[tooltip] .body .buttons {
  margin-top: 30px;
  text-align: center;
}
[tooltip] .body .buttons * {
  margin: 0 10px;
}
[tooltip]:before {
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 9px solid #f2f2f2;
  left: 47%;
  opacity: 1;
  position: absolute;
  top: -9px;
}

JAVASCRIPT

$(document).ready(function(){
 $.fn.extend({
  tooltip: function(settings) {
    return this.each(function() {
      // 40 -> para que no esté muy pegado
      var top = $(this).offset().top + 40;
      var left = $(this).offset().left;
      // diálogo objetivo
      var dialog = $($(this).attr('target'));
      // centrado horizontal:
      // originW -> ancho del disparador (botónn, link, etc)
      // dialogW -> ancho del dialogo objetivo
      originW = $(this).width();
      dialogW = dialog.width();

      // posiciona los dialogos. El centrado lo hace en base a:
      // [ancho_dialogo / 2] - (ancho_disparador / 2)
      var centerMargin = (dialogW / 2) - (originW / 2);
      top += $(this).height();
      var cssTop = (top + settings.extraMargin) + 'px';
      var cssLeft = (left - centerMargin) + 'px';
      dialog.css('transform', 'translate(' + cssLeft + ', ' + cssTop + ')');

      $(this).on('click', function() {
        var status = dialog.attr('status');
        // está oculto, se debe mostrar
        if(status === 'hidden') {
          showTooltip();
        } else {
          hideTooltip();
        }
      });

      var showTooltip = function() {
        var _cssTop = top + 'px';
        dialog.css('opacity', '1');
        dialog.css('visibility', 'visible');
        dialog.css('transform', 'translate(' + cssLeft + ', ' + _cssTop + ')');
        dialog.attr('status', 'visible');
      }

      var hideTooltip = function() {
        dialog.css('opacity', '0');
        dialog.css('visibility', 'hidden');

        dialog.attr('status', 'hidden');
      }
    });
  }
});

$('[toggle="tooltip"]').tooltip({ extraMargin: 50 });
});

2 Respuestas

3votos

jrgm0005 Puntos2990

Hola @luis2016,

La mejor opción para tu problema sería usar css, sería más fácil de hacer, usando una posición absolute para el tooltip tomando referencia del botón, así es como yo lo haría, pero si quieres seguir con como está planteado y usar JavaScript la mejor opción una vez que he visto los comentarios es tal y como comenta @Leonardo-Tadei usar el evento onResize... pero si no tienes mucha idea de esto primero deberías de aprender a usar JavaScript básico. Y más adelante pelearte con problemas más avanzados.

1voto

luis2016 comentado

Amigo el problema es que la el principal problema de lo que quiero hacer es que el modal que yo quiero hacer va a funcionar en diferentes botones que yo imprimo en un posts(sistema de posts y comentarios) con php.Lo he usado con clases css y cuando hago click en el boton numero 2 el modal me sale el primero-

3votos

Leonardo-Tadei Puntos227320

Hola @luis2016,

el problema que tenés es por estar centrando la ventana con JS, en vez de centrarla solo con CSS. Como JS calcula la posición según el tamaño de la ventana del navegador y lo fija, al cambiar el tamaño, no se mueve.

Una solución con poco esfuerzo a tu problema es crear una función del tooltip que rehaga el cálculo para tener nuevos valores de cssLeft y _cssTop y luego volver a llamar a showTooltip.

A esta nueva función la llamás en el onResize de la página y listo!

Saludos cordiales.

1voto

luis2016 comentado

Amigo me hablaste chino,ese codigo no lo hice yo.

1voto

Leonardo-Tadei comentado

Hola @luis2016,

entonces, poné código que hayas hecho vos, o que hayan hecho otros y comprendas bien lo que hace... si no comprendés el código que ponés en tu propia pregunta, se me hace difícil que alguien pueda ayudarte :-(

1voto

luis2016 comentado

como decimos aqui, Ta'to'.Ademas quieres saber porque escogi este codigo??PORQUE NO ENCONTREE MASSS,intente por mi hacerlo,y la unica cosa que me salia era el bendito modal en el mismo sitio del mismo boton,del primer boton!!!!Solo se un poco de jquery basico.y nada mas.Gracias.Lo unico que se aprende en estos tutoriales es onclick,hover,etc.....solo eso.

1voto

Leonardo-Tadei comentado

Estimado @luis2016,

creo que entiendo lo que planteás... la cuestión es si querés aprender, o si querés que alguien (alguien de ED o alquien que haya publicado una porción de código en otro lugar) te solucione el problema.

En mi humilde opinión, deberías tratar de consolidar tus conocimientos de base y comprender las tecnologías web que estés usando.

Luego, cuando tengas un problema y busques soluciones y ejemplos de código, serás capaz de extraer la idea y aplicarla a tu problema. Es extremadamente raro y puntual que una porción de código suelta que se encuentra por ahí sirva sin cambios para resolver cualquier problema.

En este punto, mi sugerencia es que uses los modales de Bootstrap, que se centran horizontalmente por default y tienen un aspecto agradable. Esto creo que resuleve tu problema, y si bien usar Bootstrap no te ayudará a entender cómo funciona, al menos es una tecnología muy usanda y que se puede aplicar a varias situaciones.

Saludos cordiales

1voto

luis2016 comentado

Ok.Te voy a explicar mi problema.Tengo un sistema de hacer posts con php y mysql.Bien.Cada posts que el usuario hace imprime el post mas un boton a su lado parecido al sistema que tiene este sitio web.Entonces ese boton es el que me abre el modal.El problema radica en que cuando hago click en segundo boton del segundo o tercero o cuarto,etc,el modal me sale en el primero.Ese codigo que puse mas arriba me soluciono eso y ahora lo unico que necesito es posicionarlo segun se redimensione la ventana.

1voto

luis2016 comentado

Ok.Lo hice con css y un poco de javascript,usando Document.GetElementById y unas cuantas coas mas.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta