Home / Questions / 87196
Accepted
MNibor
Asked: 2020-07-16 04:55:57 +0800 CST 2020-07-16 04:55:57 +0800 CST

Popup message in semantic ui

  • 772

I have a button:

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

below I have the initialization of the popup message:

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

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

How do I link that popup message with the button that I defined above? I read the documentation but I did not understand.

javascript

2 Answers

  1. Best Answer

    You are applying an incorrect selector when telling semantic the element (button in this case) that you want to activate the popup. You could use for example .ui.buttonin the JavaScript selector, without changing the actual html, but it may be too generic. My suggestion is that you add another more personalized class, which indicates the purpose of the popup, which in this case is to notify that said functionality is only available for registered users, which is why I wrote.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

  2. You can do it using the click()jquery method.

    First we assign a id="enviar-msg-button"to the button to be able to identify it:

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

    Then we look for the button by its id and we tell it that when we click, our 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'
  });
})
    • 1