JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<div id="content">
    <h1>Title</h1>
    Some content here

    <button id="show-dialog">Try me!</button>
    
    <p>How about a confirm dialog?</p>
    <button id="show-confirm-dialog">Confirm</button>

    <hr>
    
    <button id="new-message">New Message</button>
    <button id="clear-messages">Clear Messages</button>
    <div id="message-list-container"></div>
</div>


<div id="overlay"></div>

<script id="info-dialog-tpl" type="text/template">
    <div class="dialog info-dialog">
        <p class="message">Your info here!</p>
        <button class="close">Close</button>
    </div>
</script>

<script id="confirm-dialog-tpl" type="text/template">
    <div class="dialog confirm-dialog">
        <p class="message">Your info here!</p>
        <button class="ok">OK</button>
        <button class="cancel">Cancel</button>
    </div>
</script>

<script id="message-list-tpl" type="text/template">
    <h3>Message List</h3>
    <span class="message-count">You don't have any messages</span>
    <ul class="message-list">
        <li>
            <h4 class="subject">subject</h4>
            From: <h4 class="from inline">from</h4>
            <p class="body">message body</p>
        </li>
    </ul>
</script>

CSS

#content{
    max-width: 400px;
    margin: 0 auto;
}
.dialog{
  position: fixed;
  top:50%;
  left: 50%;
  margin: -50px -100px;
  height: 80px;
  width: 180px;
  background: #dde;
  border: 1px solid #bbc;
  border-radius: 3px;
  padding: 0px 10px;
  z-index: 2;
}
#overlay{
 position:fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,0,0,.3);
 display:none;   
}
.inline {
 display: inline-block;   
}

JavaScript

$('#show-dialog').click(function(){
    if ($('.info-dialog').length){
        $('.info-dialog').show();
    }
    else{
        var dialog = $($('#info-dialog-tpl').html());
        dialog
            .appendTo('body')
            .find('.close').click(function(){
               dialog.remove(); 
               $('#overlay').hide();
            });
    }
    $('#overlay').show();
});

$('#new-message').click(function(){
    messageList.addMessage({subject: "Breaking News", from: "future", body: "new message"});
});
$('#clear-messages').click(function(){
    messageList.setMessages([]);
});

ConfirmDialog = function(options){
    var self = this;
    var defaults = {
        message: 'Are you sure?',
        onOK: function(){},
        onCancel: function(){}
    }
    self.options = $.extend(defaults, options);
    
    //grab the dialog from the template
    var el = this.el = $($('#confirm-dialog-tpl').html());
    
    el.find('.ok').click(function(){
        var shouldClose = self.options.onOK();
            if (shouldClose !== false)
               self.close();
        });
    el.find('.cancel').click(function(){
           self.options.onCancel();
           self.close();
        });
    
    el.find('.message').html(self.options.message);

    el.hide();
    el.appendTo('body');
}
ConfirmDialog.prototype = {
    show: function(){
        this.el.show();
        $('#overlay').show();
    },
    close: function(){
        this.el.remove();
        if(!$('.dialog').length) $('#overlay').hide();
    }
}

var phrases = ['Are you sure?', 'Do you want to continue?', 'Et tu, Brute?'];
var clicks = 0;

$('#show-confirm-dialog').click(function(){
    var whichPhrase = clicks++ % phrases.length;
    new ConfirmDialog({message: phrases[whichPhrase], onOK: rebuttal}).show();
});

var rebuttal = function(){
    new ConfirmDialog({message: "Oh no you didn't!", onOK: rebuttal}).show();
}

MessageList = function(el, options){
    var self = this;
    var defaults = {
   ...