JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<button onclick="tryme()">TRY</button>
<div class="ui basic modal">
  <div class="header">
    Carregando
  </div>
  <div class="image content">
    <div class="image">
      <i class="notched circle loading icon"></i>
    </div>
    <div class="description">
      <p>Aguarde um momento</p>
    </div>
  </div>
</div>
<div class="ui long modal">
    <i class="close icon"></i>
    <div class="header">
        HEADER
    </div>
    <div class="content">
        CONT
    </div>
    <div class="actions">
        <div class="ui cancel button"><i class="close icon"></i> close</div>
    </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

function tryme() {
    
    
    
     $('.basic.modal').modal({
         allowMultiple: false,
         onVisible: function() {
             
         	 var jqxhr = $.getJSON("http://sgconlineapi.systemar.net/api/noticias/123", function() {
                console.log( "success" );
             })
                .done(function(data) {
           			//dont have a decent id, so put all the modal logic into fail

                })
                .fail(function() {


                   $('.basic.modal').modal('hide');

                    console.log( "error" );
                })
                .always(function() {
                    console.log( "complete" );
                });
         
         },
         onHidden: function() {
             $('.long.modal').modal('show');
         }
         
     }).modal('show');
    
    
    
    
   
    
}