JSFiddle - React, Tailwind, and code Playground

Page Flip modal dialog - DEMO

by Jennifer Perrin

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu est justo, a semper mi. Praesent sit amet erat lectus. Nam faucibus porttitor tempus. Sed auctor metus vel dolor imperdiet a interdum nunc lacinia. Mauris id nulla tortor, condimentum vehicula elit. Sed dolor velit, pharetra sit amet imperdiet quis, sagittis at massa. Nam sodales sodales nisl, sed varius magna porta in.
    <button class="large-buttons">Click me</button>
</p>
<p>
Quisque cursus ultricies pellentesque. Integer sed nunc felis. Nullam hendrerit scelerisque purus ac lobortis. Sed a risus lacinia enim feugiat sagittis. Cras sed nibh erat, non porttitor ante. Aliquam quis libero euismod nulla fringilla facilisis nec id elit. Donec sapien sapien, pretium quis adipiscing sed, pellentesque in ante. Nulla placerat ultricies est, eu commodo mi tincidunt consequat.
    <button class="large-buttons">Click me</button>
</p>
<p>
Nullam in tempor lectus. Nunc eu ipsum vel justo molestie scelerisque. Proin fringilla nunc sit amet sem vestibulum et placerat nulla suscipit. Cras volutpat, neque in venenatis pellentesque, mi urna imperdiet metus, quis commodo odio sem eu nibh. Pellentesque eget erat in dui commodo placerat. Nunc eu ipsum a massa congue tempor. Pellentesque nec tellus lectus.
    <button class="large-buttons">Click me</button>
</p>
<p>
Proin at porta risus. Vivamus a nibh eu purus consectetur porta a ut mi. Phasellus laoreet nibh eget tortor accumsan et dictum neque lacinia. Quisque ac lacus nec nibh vehicula imperdiet id quis erat. Aenean vestibulum venenatis feugiat. Nulla lobortis pulvinar libero, non consectetur est tempus a. Nulla feugiat eleifend augue vitae pellentesque. Proin adipiscing, tortor a viverra tempus, odio ipsum tincidunt enim, a consequat libero risus ac est. Nam mattis risus at lectus vulputate placerat. Proin eu ipsum augue. Duis ultrices eleifend sem, sed iaculis ligula fringilla at. Mauris mollis suscipit diam eget condimentum.
    <button...

CSS

/**
 *     flip card css credit to David walsh
 * http://davidwalsh.name/css-flip
 */
body>.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
/* flip the pane when hovered */
body>.flip-container.hover>.flipper, body>.flip-container.hover>.flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

body>.flip-container, body>.flip-container>.flipper>.front, body>.flip-container>.flipper>.back {
    width: 100%;
}

/* flip speed goes here */
body>.flip-container>.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
body>.flip-container>.flipper>.front, body>.flip-container>.flipper>.back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
body>.flip-container>.flipper>.front {
    z-index: 2;
}

/* back, initially hidden pane */
body>.flip-container>.flipper>.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/**
 *     back extra styling
 */
body>.flip-container>.flipper>.back {
    background-color: #252326;
    background: url('http://fc08.deviantart.net/fs42/f/2009/070/1/c/Purple_Blur__a_wallpaper_by_Sostopher.jpg') center center scroll;
}

/**
 *     modal style
 */
body>.flip-container>.flipper>.back>.flip-modal{
    width: 500px;
    margin: 100px auto;
    padding: 20px;
    background: #fefefe;
    border-radius: 3px;
   ...

JavaScript

/**
 * @author http://blazeboy.me
@usage : 
1- include the css in your style.css
2- include this javascript plugin in your page 
3- use the $(<button-to-flip-selector>).flip_dialog(<options>);
4- options could be :
- message : message to display it for the user
- html : does the message contain any html to prase or just text
 */
(function( $ ){
    
  // initial
    var flipper = $('<div class="flip-container"><div class="flipper"><div class="front"></div><div class="back"><div class="flip-modal"><p></p><div class="right"><button>OK</button></div></div></div></div></div>');
    
    $('body>*').detach().appendTo($('.front',flipper));
    flipper.appendTo('body');
    
    $.fn.flip_dialog = function( options ) {  
        
        var settings = $.extend( {
                            'message': 'Message Here',                             
                            'html': false
                        }, options);
        
        return this.each(function() {
            var $this = $(this);
            $this.click(function() {
                // fix backstyle
                $('.flip-container .back').height($('.flip-container .front').height());
            
                // scroll to top
                $(window).scrollTop(0)
            
                if(settings.html)
                    $('.flip-container .back p').html(settings.message);
                else
                    $('.flip-container .back p').text(settings.message);
                
                
                // then flip that side
                $('.flip-container').addClass('hover');
                $('.flip-container .back button').click(function(){
                    $('.flip-container').removeClass('hover');
                });
            });
        });
  };
})( jQuery );

/**
this is a demo usage.
*/
$(function() {
    $('.large-buttons').flip_dialog({message: 'this is spartaaaaaaaaa !!!!'});

});