Bulma Demo
Bulma Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" /> <script type="text/javascript" src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script> </head> <body> <span class="button is-danger is-large modal-button" data-target="lanuchModal" id="lanuchModal">Launch Modal with effect</span> <div id="modal-newsPaper-fs" class="modal modal-fx-newsPaper"> <div class="modal-content modal-card"> <header class="modal-card-head"> <p class="modal-card-title">Modal with fadeInScale</p> <button class="modal-button-close delete" id="closecross" aria-label="close"></button> </header> <section class="modal-card-body"> <div class="content"> <h1>fadeInScale Effect</h1> <p>The h1 headings content here</p> <div> </section> <footer class="modal-card-foot"> <button class="modal-button-close button is-success">Yes</button> <button class="modal-button-close button" id="closebtn">Close</button> </footer> </div> </div> <script> $("#lanuchModal").click(function() { $(".modal").addClass("is-active"); }); $(".modal-close").click(function() { $(".modal").removeClass("is-active"); }); $("#closebtn").click(function() { $(".modal").removeClass("is-active"); }); $("#closecross").click(function() { $(".modal").removeClass("is-active"); }); </script> </body> </html>
Launch Modal with effect
Modal with fadeInScale
fadeInScale Effect
The h1 headings content here