モーダル　SemanticUICreate multiple modals in Semantic-ui

by shigetak

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div id="showmodal" class="ui button primary">
Show Modal
</div>
<div class="ui fullscreen modal event-modal">
  <div class="header">
  ecs_sign.c
  </div>
  <div class="content">
    <div id="trigger1" class="ui primary button">
      test1
    </div>
    <div id="trigger2" class="ui primary button">
      test2
    </div>
    <div id="trigger3" class="ui primary button">
      test3
    </div>    
  </div>
  <div class="actions">
    <div class="ui deny black button">
    Close
    </div>
  </div>
</div>

<div class="ui info event-modal modal" data-object="trigger1">
  <div class="header">
    ecs_sign.c1
  </div>    
  <div class="content">
    test?1
  </div>
  <div class="actions">
    <div class="ui deny black button">Close</div>
  </div>    
</div>

<div class="ui info event-modal modal" data-object="trigger2">
  <div class="header">
    ecs_sign.c2
  </div>    
  <div class="content">
    test?2
  </div>
  <div class="actions">
    <div class="ui deny black button">Close</div>
  </div>    
</div>      

<div class="ui info event-modal modal" data-object="trigger3">
  <div class="header">
    ecs_sign.c3
  </div>    
  <div class="content">
    test?3
  </div>
  <div class="actions">
    <div class="ui deny black button">Close</div>
  </div>  
</div>

JavaScript

$('.event-modal').modal({
    allowMultiple: true
  });
  
$('#showmodal').click(function() {
	$('.fullscreen.modal').modal('show');
});

// ページ表示と同時にモーダル表示
	$('.fullscreen.modal').modal('show');


$('.event-modal.info').each(function(idx, elem) {
	$(elem).modal('attach events', '#' + $(elem).attr('data-object'));
});