4

Tengo un botón:

<div class="ui container">
   <a href="#" class="fluid ui violet button"><i class="mail icon"></i>  Enviar Mensaje</a>
</div>

mas abajo tengo la inicialización del mensaje popup:

<script type="text/javascript">
  $('.activating.element')
    .popup()
  ;

  $('.ui.popup')
    .popup({
    title   : 'Atención:',
    content : 'Esta funcionalidad sólo está disponible para usuarios registrados'
  })
  ;
</script>

cómo lo enlazo ese mensaje popup con el boton que definí mas arriba ? Lei la documentación pero no entendí.

6
  • A que te refieres con enlazar?
    – Einer
    Commented el 15 jul. 2017 a las 13:18
  • con que no alcanza con definir el popup... me falta algo mas para que determinado botón tenga ese mensaje y no cualquier boton
    – MNibor
    Commented el 15 jul. 2017 a las 13:21
  • Osea, quieres que al click se muestre el popup?
    – Einer
    Commented el 15 jul. 2017 a las 13:22
  • exacto, pero en ese boton y no otro...
    – MNibor
    Commented el 15 jul. 2017 a las 13:27
  • ¿qué tipo de popup de semantic quieres utilizar?
    – Shaz
    Commented el 15 jul. 2017 a las 15:50

2 respuestas 2

3

Estás aplicando un selector incorrecto al momento de indicarle a semantic el elemento (botón en este caso) que quieres que active el popup. Podrías utilizar por ejemplo .ui.button en el selector de JavaScript, sin cambiar el html actual, pero puede ser demasiado genérico. Mi sugerencia es que agregues otra clase más personalizada, que indique el propósito del popup, que en este caso es notificar que dicha funcionalidad está disponible únicamente para usuarios registrados, por lo cual escribí .registered-only

$('.registered-only')
    .popup({
    title   : 'Atención:',
    content : 'Esta funcionalidad sólo está disponible para usuarios registrados'
  })
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.js"></script>
<div class="ui container">
   <a href="#" class="fluid ui violet button registered-only"><i class="mail icon"></i>  Enviar Mensaje</a>
</div>

3
  • te funciona ? porque a mi no me funciona... el jquery.min.js no tendría que ir antes del css de semantic ?
    – MNibor
    Commented el 15 jul. 2017 a las 16:03
  • Había cometido un pequeño error en la clase, perdón. Revisa de nuevo
    – Shaz
    Commented el 15 jul. 2017 a las 16:04
  • un espectáculo !!!
    – MNibor
    Commented el 15 jul. 2017 a las 16:08
1

Puedes hacerlo utilizando el metodo click() de jquery.

Primero le asignamos un id="enviar-msg-button" al boton para poder identificarlo:

<div class="ui container">
       <a href="#" id="enviar-msg-button" class="fluid ui violet button"><i class="mail icon"></i>  Enviar Mensaje</a>
    </div>

Luego buscamos el boton por su id y le dicemos que al dar clic, se ejecute nuestro popup:

 $("#enviar-msg-button").click(function(){

  $('.activating.element').popup();

  $('.ui.popup').popup({
    title   : 'Atención:',
    content : 'Esta funcionalidad sólo está disponible para usuarios registrados'
  });
})
2
  • está bueno, pero no funciona... no se si será por una cuestión propia de semantic ui
    – MNibor
    Commented el 15 jul. 2017 a las 13:41
  • 2
    Esto debería de funcionar bien, sin problemas, si no te funciona revisa bien el orden de tu código, revisa que tengas el document.ready donde tiene que estar, así como todas las instrucciones, etc. Recuerda que javascript es un lenguaje interpretado, línea a línea por tanto todo debe estar en su lugar para que se ejecute una instruccion después de otra. Saludos! @MNibor Commented el 15 jul. 2017 a las 15:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.