How to display a modal form in SEMANTIC UI

Question

How to display a modal form in SEMANTIC UI

Navigation

#1 by (2 votes)

3

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

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 do not know how to link the button (suppose it has id="help") to the event of clicking on it to show that modal message ...

javascript jquery html semantic-ui

asked by MNibor 18.07.2017 в 02:19

source

1 answer

Cross imports in Django Change key in Array in php

score 2 · Accepted Answer

Keeping in mind 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>