Modal DimmerTransition

A modal displays content that temporarily blocks interactions with the main view of a site

$('.special.modal')
  .modal({
    centered: false
  })
  .modal('show')
;

$('.bottom.aligned.modal')
.modal('show')
;

$('.long.modal')
  .modal('show')
;

$('.longer.modal')
  .modal('show')
;

// initialize all modals
$('.coupled.modal')
  .modal({
    allowMultiple: true
  })
;
// open second modal on first modal buttons
$('.second.modal')
  .modal('attach events', '.first.modal .button')
;
// show first immediately
$('.first.modal')
  .modal('show')
;

$('.coupled.modal')
  .modal({
    allowMultiple: false
  })
;
// attach events to buttons
$('.second.modal')
  .modal('attach events', '.first.modal .button')
;
// show first now
$('.first.modal')
  .modal('show')
;

$('.basic.test.modal')
  .modal('setting', 'closable', false)
  .modal('show')
;

$('.ui.basic.test.modal')
  .modal({
    closable  : false,
    onDeny    : function(){
      window.alert('Wait not yet!');
      return false;
    },
    onApprove : function() {
      window.alert('Approved!');
    }
  })
  .modal('show')
;

$('.test.modal')
  .modal('attach events', '.test.button', 'show')
;

$('.selection.dropdown')
  .dropdown({
    onChange: function(value) {
      $('.test.modal')
        .modal('setting', 'transition', value)
        .modal('show')
      ;
    }
  })
;

$('.ui.modal')
  .modal({
    inverted: true
  })
  .modal('show')
;

$('.ui.modal')
  .modal({
    blurring: true
  })
  .modal('show')
;

$.modal({
    title: 'Important Notice',
    class: 'mini',
    closeIcon: true,
    content: 'You will be logged out in 5 Minutes',
    actions: [{
      text: 'Alright, got it',
      class: 'green'
    }]
}).modal('show');

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

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

var now = new Date();now.setDate(now.getDate()+Math.floor(Math.random() * 31 + 1));
$('#reusemodal').modal({
  title: 'Free voucher until '+now.toDateString(),
  content: 'Your voucher code is'+Math.random().toString(16).substr(2).toUpperCase()+'',
  classContent: 'centered',
  class: 'small'
}).modal('show');

<div class="ui modal">
    <div class="header"></div>
    <div class="content"></div>
    <div class="actions">
        <button class="ui green approve button">Redeem now</button>
        <button class="ui red deny button">Not now</button>
    </div>
</div>

$.modal('alert','hello');

$.modal('alert','Watch out','This is an important message!');

$.modal('alert',{
   title: 'Listen to me',
   content: 'I love Fomantic-UI',
   handler: function() {
     $.toast({message:'Great!'});
   }
 });

// title and content
  $.modal('confirm','Attention!','Ready?');

// title, content and handler
  $.modal('confirm','Attention!','Ready?', function(choice){
    $.toast({message:'You '+ (choice ? 'Accepted':'Declined')});
  });

// content and handler
  $.modal('confirm','Ready?', function(choice){
    $.toast({message:'You '+ (choice ? 'Accepted':'Declined')});
  });

// title and handler
  $.modal('confirm',{
    title: 'Ready?',
    handler: function(choice){
      $.toast({message:'You '+ (choice ? 'Accepted':'Declined')});
    }
  });

// provide a placeholder
  $.modal('prompt',{
    title: 'Enter your name',
    placeholder: 'Do not enter your mothers name!',
    handler: function(name){
        $.toast({message: 'Your name is ' + (name || 'CANCELLED')});
    }
  });

// set a defaultValue
  $.modal('prompt',{
    title: 'Enter your name',
    defaultValue: 'mommy',
    handler: function(name){
        $.toast({message: 'Your name is ' + (name || 'CANCELLED')});
    }
  });

// custom input
  $.modal('prompt', 'Custom Input', 'Nickname', function(name) {
    $.toast({message: 'Your name is ' + (name || 'CANCELLED')});
  });

$.fn.modal.settings.templates.greet = function(username) {
// do something according to modals settings and/or given parameters
  var settings = this.get.settings(); // "this" is the modal instance
  return {
    title: 'Greetings to ' + username + '!',
    content: ''+ username.toUpperCase() + 'is the best!',
    class: 'inverted',
    classContent: 'centered',
    dimmerSettings: {
      variation: 'inverted'
    }
  }
}

$.modal('greet','mom')

$.modal('greet','dad')