Home / Questions / 87628
Accepted
MNibor
Asked: 2020-07-18 16:19:18 +0800 CST 2020-07-18 16:19:18 +0800 CST

How to display a modal form in SEMANTIC UI

  • 772

I have a button in the information or help form (the red button with the "i") Red button

I am with semantic ui and according to the documentation I can generate a modal defining the following:

<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>

that would be the content of the modal... while I must define

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

Now... I don't know how to bind the button (let's say it has id="help") to the event of clicking on it to show that modal message...

javascript

1 Answers

  1. Best Answer

    Considering that you use jQuery for Semantic, you can use .click()to open the modal window:

    $(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>

    • 2