Instantly share code, notes, and snippets.
Last active
April 21, 2020 11:57
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save minakshi-sharma/50deea07fba8f6bbd6caf859a466f896 to your computer and use it in GitHub Desktop.
Create Modal on button click
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| /* The Modal (background) */ | |
| .modal { | |
| display: none; /* Hidden by default */ | |
| position: fixed; /* Stay in place */ | |
| z-index: 1; /* Sit on top */ | |
| padding-top: 100px; /* Location of the box */ | |
| left: 0; | |
| top: 0; | |
| width: 100%; /* Full width */ | |
| height: 100%; /* Full height */ | |
| overflow: auto; /* Enable scroll if needed */ | |
| background-color: rgb(0,0,0); /* Fallback color */ | |
| background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ | |
| } | |
| /* Modal Content */ | |
| .modal-content { | |
| background-color: #fefefe; | |
| margin: auto; | |
| padding: 20px; | |
| border: 1px solid #888; | |
| width: 80%; | |
| } | |
| /* The Close Button */ | |
| .close { | |
| color: #aaaaaa; | |
| float: right; | |
| font-size: 28px; | |
| font-weight: bold; | |
| } | |
| .close:hover, | |
| .close:focus { | |
| color: #000; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| </style> | |
| <!-- Trigger/Open The Modal --> | |
| <center><button id="myBtn" style="background-color: rgb(228, 176, 113); | |
| text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000; | |
| border: none; | |
| color: #000000; | |
| padding: 15px 32px; | |
| text-align: center; | |
| ">Read More Review</button><center> | |
| <!-- The Modal --> | |
| <div id="myModal" class="modal"> | |
| <!-- Modal content --> | |
| <div class="modal-content"> | |
| <span class="close">×</span> | |
| <h2 style="font-family: Handlee, sans-serif;font-weight: 700;font-size: 3.5rem;color:#000000;">What People Are Saying About Christine’s Book…</h2> | |
| <p> </p> | |
| <div style="background-color: rgba(237, 231, 183, 0.34); | |
| border-color: rgba(237, 231, 183, 0.34); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/ieXEiS5Kxc1DwaFwQvB1jJwUD0DHI4G309TsedQ4L9LTFIZoQlrrVWckzbB4YGm6JX-W0Dtk3EFlrx8EW0iK=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">“Every now and then a book comes along with just the right message at just the right time. The Freedom Formula is one of these exceptional books.” </p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">Loral Langemeier<br> Founder & CEO, Live Out Loud</p> | |
| </div> | |
| <div style="background-color: rgba(227, 176, 113, 0.52); | |
| border-color: rgba(227, 176, 113, 0.52); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;margin-top:10px;margin-bottom:10px;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/ieXEiS5Kxc1DwaFwQvB1jJwUD0DHI4G309TsedQ4L9LTFIZoQlrrVWckzbB4YGm6JX-W0Dtk3EFlrx8EW0iK=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">“All entrepreneurs want the same thing. Freedom! Time freedom. Boss Freedom. Money freedom. Freedom to pursue their dreams. Read The Freedom Formula and discover the secret to experiencing freedom in your life… starting today.” </p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">Victoria Colligan<br> Founder, www.LadiesWhoLaunch.com</p> | |
| </div> | |
| <div style="background-color: rgba(237, 231, 183, 0.34); | |
| border-color: rgba(237, 231, 183, 0.34); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/3P2C67n9b9jCDk-iX8ZFlzVfEyUU6iteBZ8HcLfei7Ex1myzt4IJZho76VKLcdfamt5ZX2gZtAYZIaUT2bY7Wg=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">“Christine Kloser combines the heart and soul of Mother Teresa with the business savvy of Donald Trump without missing a beat. The Freedom Formula gives entrepreneurs both a spiritual road and a practical pathway to build lasting success.” </p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">Susan Harrow<br> Author of Sell Yourself Without Selling Your Soul & CEO of PRsecrets.com</p> | |
| </div> | |
| <div style="background-color: rgba(227, 176, 113, 0.52); | |
| border-color: rgba(227, 176, 113, 0.52); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;margin-top:10px;margin-bottom:10px;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/UN5PjEEzyp2a_xJfocHTmrDfZpDPj6i4Ig-4djBObEH4ml4yeoZ8uoPoKf0gUkX2Xu6rg3Pxq5opMohAnzOO=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">"What a beautiful book! Christine Kloser has written the heart and soul-centered business book the world has been waiting for. With clear examples and step-by-step instructions, she shows you just how to live your life's purpose and make a profit, too. Well done!" </p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">Chellie Campbell<br> Author of The Wealthy Spirit and Zero to Zillionaire</p> | |
| </div> | |
| <div style="background-color: rgba(237, 231, 183, 0.34); | |
| border-color: rgba(227, 176, 113, 0.52); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;margin-top:10px;margin-bottom:10px;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/Hx-F0L-kK9Q9kGGmsQmxvp7C2LIw4fEVm5uImCcMUoxPVARsVW6XySffvo7g1JdSwA3v-WIFIKDip_y2KEcK=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">“Christine Kloser's new book The Freedom Formula is a bold step that bridges the importance of "Soul" in your business. She has weaved the power of being conscious on a spiritual level with the importance of understanding how a business really works. This is a terrific piece of work for anyone who wants to operate a business on a higher spiritual level.”</p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">Joe Nunziata<br> Bestselling Author of Spiritual Selling </p> | |
| </div> | |
| <div style="background-color: rgba(227, 176, 113, 0.52); | |
| border-color: rgba(227, 176, 113, 0.52); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;margin-top:10px;margin-bottom:10px;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/qd8KjGgtiCjsVyC2HreHDsVU3Gv32umCck2yVoKrZQST57wUwBgNMthST1HUXPDpZ--FJioxwr9KkO73X5-KmZo=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">"The Freedom Formula is not only a practical guide to building a lifestyle business (that makes money) but it's also a kick-in-the-pants to entrepreneurs everywhere to be among the strongest and most positive influences in the new world; a world where everyone experiences real freedom.” </p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">Michael Port<br> Author of Book Yourself Solid & Beyond Booked Solid </p> | |
| </div> | |
| <div style="background-color: rgba(237, 231, 183, 0.34); | |
| border-color: rgba(237, 231, 183, 0.34); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;margin-top:10px;margin-bottom:10px;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/ScGdKCM54loDWBZoJChvL-s61mMs9calYRW80wMcQ-6BRq9uXPKnTx4Mwl82Ooduj8vcuDvDTkJ_k4euzwgSuxQ=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">“The Freedom Formula reveals a massively important message.... that bringing your spiritual beliefs into business is the only true path to success. Christine Kloser provides an authentic and powerful approach for combining passion and profit.”</p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">Arielle Ford<br> Author of The Soulmate Secret</p> | |
| </div> | |
| <div style="background-color: rgba(237, 231, 183, 0.34); | |
| border-color: rgba(227, 176, 113, 0.52); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;margin-top:10px;margin-bottom:10px;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/ieXEiS5Kxc1DwaFwQvB1jJwUD0DHI4G309TsedQ4L9LTFIZoQlrrVWckzbB4YGm6JX-W0Dtk3EFlrx8EW0iK=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">“Finally, a book for conscious entrepreneurs that explains the value of integrating your soul into your business. Christine Kloser makes it clear why advancing consciousness in business is the key to advancing consciousness worldwide - and she makes it appealing, practical and possible.”</p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">Judith Sherven<br> PhD and Jim Sniechowski, PhD | |
| Bestselling authors of Be Loved for Who You Really Are | |
| </p> | |
| </div> | |
| <div style="background-color: rgba(227, 176, 113, 0.52); | |
| border-color: rgba(227, 176, 113, 0.52); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;margin-top:10px;margin-bottom:10px;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/bq144eWYay2kZ3fuDKqWFVl_vZTOyKdkdA1rApTvQf9f33gZaZkezaL61fLxxMwdEkBP_22zL6_snSC3LpQEBb8=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">"If you are interested in deepening the soul of your business and relationship to Divine Order in any work environment, this upbeat and enlightening book will show you where to begin. Christine's practical action exercises will jump start your journey toward conscious business success. Read it and feel empowered!"</p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">Charlene M. Proctor<br> Ph.D., Best-selling author of Let Your Goddess Grow! and The Women's Book of Empowerment</p> | |
| </div> | |
| <div style="background-color: rgba(237, 231, 183, 0.34); | |
| border-color: rgba(227, 176, 113, 0.52); | |
| background-image: none; | |
| background-size: cover; | |
| background-position: center center; | |
| background-repeat: no-repeat;padding-top: 11.4px; | |
| padding-right: 11.4px; | |
| padding-bottom: 16px;min-height: 1px; | |
| padding-left: 11.4px;flex: 1 1 auto;margin-top:10px;margin-bottom:10px;min-height: 180px; | |
| "> | |
| <img src="https://lh3.googleusercontent.com/o3H_Szg3Rq80wXNK_8K6szv99mma1eboebKziCgdWB89OGMT9XYdqI9niDmCtEjpOZWTNZk7UEReWXBhvmYh=w1024" alt="Dr-Izabella-Wentz" style="float:left;width:150px;height:150px;padding-right:10px;" position=relative /> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1.25rem;color:#000000;">“Finally – someone who brings consciousness and awareness to the business of making money. Christine Kloser takes us on a thrilling adventure of what business could be like if it had both heart and mind. The result is a guide book on how to transform you, your business and the world.”</p> | |
| <p style="text-decoration:none;font-family: Georgia, sans-serif;font-size: 1rem;color:#000000;text-align: right;">James Roche<br> The Info Product Guy, www.InfoProductGuy.com </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Get the modal | |
| var modal = document.getElementById('myModal'); | |
| // Get the button that opens the modal | |
| var btn = document.getElementById("myBtn"); | |
| // Get the <span> element that closes the modal | |
| var span = document.getElementsByClassName("close")[0]; | |
| // When the user clicks the button, open the modal | |
| btn.onclick = function() { | |
| modal.style.display = "block"; | |
| } | |
| // When the user clicks on <span> (x), close the modal | |
| span.onclick = function() { | |
| modal.style.display = "none"; | |
| } | |
| // When the user clicks anywhere outside of the modal, close it | |
| window.onclick = function(event) { | |
| if (event.target == modal) { | |
| modal.style.display = "none"; | |
| } | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment