JSFiddle - React, Tailwind, and code Playground

Smart Notifications

by Jennifer Perrin

HTML

<script src="http://jenniferperrin.com/jsfiddle/js/jquery.easing.1.3.js"></script>
<div id="container_p">
    <div id="note_1" class="btn">Click Me</div>
    <span class='text_span'>Image</span><br />
    <div id="note_2" class="btn">Click Me</div>
    <span class='text_span'>Video Removed</span><br />
    <div id="note_3" class="btn">Click Me</div>
    <span class='text_span'>I time Out</span><br />
    <div id="note_4" class="btn">Click Me</div>
    <span class='text_span'>Video</span><br />
    <div id="note_5" class="btn">Click Me</div>
    <span class='text_span'>Without duplication</span><br />
    <div id="note_6" class="btn">Click Me</div>
    <span class='text_span'>Custom style</span>
</div>

CSS

body {
    font-family: arial;
    color: #3b3b3b;
    font-size: 14px;
    margin: 10px 0;
}
a { text-decoration: none; }

#container_p {
    position: relative;
    width: 220px;
    height: 100%;
    background: #fff;
    margin: 0 auto;
    padding: 20px 0;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=4);
}

 .text_span {
    display: block;
    height: 20px;
    padding: 5px;
    line-height: 20px;
}
.btn {
    height: 20px;
    background: #f4dc12;
    color: #fff;
    line-height: 20px;
    text-align: center;
    margin: 0 10px;
    padding: 5px 10px;
    float: left;
    cursor: pointer;
    border-radius: 2px;
    font-size: 13px;
}
#note_1 { background: #f4dc12; }
#note_2 { background: #4fcff4; }
#note_3 { background: #8EC122; }
#note_4 { background: #212121; }
#note_5 { background: #FF5866; }
#note_6 { background: #FF9A3A; }
/* ------------------------------- */
 #case_press {
    position: fixed;
    top: 10px;
    right: 10px;
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
[data-case] {
    width: 240px;
    position: relative;
    top: 0;
    right: 0;
    margin-bottom: 10px;
    padding: 45px 15px 10px 15px;
    float: right;
    clear: right;
    font-size: 12px;
    overflow: hidden;
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    /* Firefox */
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    /* Safari and Chrome */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    background: #fff;
    display: none;
}
[data-case] img {
    float: left;
    margin-right: 15px;
    border: 0px none;
}
[data-case] iframe, [data-case] object, [data-case] embed {
    width: 100%;
    height: 200px;
    max-height: 200px;
    z-index: 1;
}
[data-close], [data-open], [data-toggle] {
    color: #fff;
    height: 35px;
   ...

JavaScript

;
(function ($, window, document) {
    $.fn.smartNotification = function (options) {
        var setting = $.extend({
            mainTitle: '',
            mainContent: '',
            hiddenContent: '',
            toggleSwitch: 'off',
            onlyOne: false,
            timerGo: false,
            timerGoTime: 3000,
            overlayOpacity: 0.7,
            overlayShowSpeed: 500,
            overlayHideSpeed: 1000,
            easingEffect: 'easeOutExpo',
            autoResizeBox: true,
            caseShow: 700
        }, options);
        var getAttrVal = this.attr('id');
        var $body = $('body');
        var $html = $('html');
        if (!$('#case_press').length) {
            $("<div id='case_press'></div>").appendTo($body)
        };
        if (!$('#general_overlay').length) {
            $("<div id='general_overlay'></div>").appendTo($body);
            $body.on('click.noteOverlay', '#general_overlay', function () {
                var genThis = $(this).siblings('[data-case]');
                removeOverCase(genThis, 'yes')
            })
        };
        var genOverlay = $('#general_overlay');
        var casePress = $('#case_press');
        casePress.off('click.noteToggle').on('click.noteToggle', '[data-toggle]', function () {
            var dataToggle = $(this);
            var ptopHeight = dataToggle.siblings('[data-ptop]').height();
            var attrDataToggle = 'data-toggle';
            var attrDataSwitch = 'data-switch';
            if (!dataToggle.attr(attrDataSwitch) || dataToggle.attr(attrDataSwitch) == 'off') {
                dataToggle.attr(attrDataSwitch, 'on');
                dataToggle.parent('[data-case]').css('height', ptopHeight).addClass('clear-p')
            } else if (dataToggle.attr(attrDataSwitch) == 'on') {
                dataToggle.attr(attrDataSwitch, 'off');
                dataToggle.parent('[data-case]').removeClass('clear-p').css({
                    'height': '',
                       ...