3

Tengo un botón en el formulario de información o ayuda (el boton rojo con la "i") boton rojo

estoy con semantic ui y segun la documentación puedo generar un modal definiendo lo siguiente:

<div class="ui modal">
   <i class="close icon"></i>
   <div class="header">
      Modal Title
   </div>
   <div class="image content">
     <div class="image">
         An image can appear on left or an icon
     </div>
    <div class="description">
       A description can appear on the right
    </div>
   </div>
   <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui button">OK</div>
   </div>
  </div>

ese seria el contenido del modal... mientras debo definir

     $('.ui.modal')
       .modal()
     ;

ahora bien... no se como enlazar el boton (supongamos que tiene como id="ayuda") al evento de hacer clic en el para mostrar ese mensaje modal...

1 respuesta 1

2

Teniendo en cuenta que usas jQuery para Semantic, puedes usar .click() para abrir la ventana modal:

$(document).ready(function(){
  $('#abrir_modal').click(function(){
    $('.ui.modal').modal('show');
  });
});
<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 modal">
   <i class="close icon"></i>
   <div class="header">
      Modal Title
   </div>
   <div class="image content">
     <div class="image">
         An image can appear on left or an icon
     </div>
    <div class="description">
       A description can appear on the right
    </div>
   </div>
   <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui button">OK</div>
   </div>
  </div>
  <button id="abrir_modal">Abrir modal</button>

5
  • Shaz, un maestro !!! necesito tener tu numero de whatsapp !!! jajajajaja
    – MNibor
    Commented el 18 jul. 2017 a las 0:55
  • como corolario: como hago para tener varios textos diferentes para distintas ayudas ? porque si tengo un boton numero dos siempre me va a abrir <div class="ui modal">
    – MNibor
    Commented el 18 jul. 2017 a las 1:12
  • 1
    Agrega un id o una clase que haga único cada modal.
    – Shaz
    Commented el 18 jul. 2017 a las 1:13
  • en el <div class="ui modal ayuda1"> <div class="ui modal ayuda2"> etc... y lo llamaría en el script como $('.ui.modal.ayuda1').modal('show'); $('.ui.modal.ayuda2').modal('show'); etc ?
    – MNibor
    Commented el 18 jul. 2017 a las 1:16
  • 1
    Los llamarías .ui.ayuda1 y .ui.ayuda2 por ejemplo
    – Shaz
    Commented el 18 jul. 2017 a las 1:18

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.