feat(modal): dynamic modal content

[lubber-de]

Description

This PR adds the same dynamic functionality like toast to create a modal just out of properties or reuse a DOM node modal as a template with its content being dynamically set via js properties.
Everything is optional and backward compatible 🙂
Most of the code is copied /adopted from the toast component so the usage is equal.

This goes along with @prudho fui-alert plugin approach (#1716) which could be more simplified then

Create a temporary modal just by JS properties

By providing new properties to the modal module and targeting to body you create temporary modals without the need to create markup on your own. The modal is temporary and will be removed from the DOM once closed.

$('body').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');

Reuse an existing modal

Also, you can still prepare a modal markup in your domtree as usual, but set the related content via js properties to reuse the general style

$('.ui.modal').modal({
  title: 'Chat rules',
  content: '<div>You can put HTML content right here</div>',
  class: 'inverted fullscreen',
  classContent: 'scrolling',
  actions: [{
    	text: 'That is awesome',
        class: 'green',
        icon: 'exclamation',
        click: function() {
            // do something. return false to prevent closing the modal
        }
  }]
}).modal('show');

Testcase

https://jsfiddle.net/lubber/eo8bdyp3/48/

Screenshot

Closes

#1407

[prudho]

LGTM !

[ko2in]

LGTM. Nice feature 🥇

[lubber-de]

Docs added by fomantic/Fomantic-UI-Docs#287