"Nice E-Mail form in Modal/Window"
Bootstrap 3.2.0 Snippet by atchoo78

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- The Modal --> <div class="modal fade" style="display:none;" id="sendMail"> <div class="modal-dialog" role="dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Cancel"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </button> <h4 class="modal-title"><span class="glyphicon glyphicon-envelope" style="color:#dee3f0;"></span> Send E-Mail</h4> </div> <div class="modal-body"> <form name="emailModal" id="emailModal" method="post" action="PATH TO YOUR MAIL SCRIPT HERE"> <div class="input-group"> <label for "email">E-Mail:</label> <input name="email" class="form-control" type="email" autofocus id="email" form="emailModal" placeholder="E-Mail"> </div> <br /> <div class="checkbox-slider--b-flat checkbox-slider-md"> <label> <input type="checkbox" id="addMail"><span> Send a copy to another E-Mail address</span> </label> </div> <div class="input-group" id="mailCC" style="display: none;"> <br /> <label for "mailCC">CC:</label> <input name="email2" class="form-control" type="email" form="emailModal" placeholder="CC E-Mail address "> </div> </div> <div class="modal-footer"> <button type="submit" form="emailModal" class="btn btn-success" style="background-color: #2597cd;"><span class="glyphicon glyphicon-send"></span> Send it!</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> </form> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <div class="container-fluid"> <div class="row"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sendMail">Ye Olde E-mail Form</button> </div> </div> </div>
/* "Titatoggle" Toggle Button/Checkbox by Jan Enning - https://github.com/kleinejan */ @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600italic,900italic,200italic,200,700italic); @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700); h4.modal-title { color: #f0f0f0; font-family: 'Roboto Slab'; font-weight: 600; font-size: 22px; } .modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; } .modal.fade .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .modal-dialog { position: relative; width: auto; margin: 10px; } .modal-content { position: relative; background-color: #ffffff; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); -webkit-background-clip: padding-box; background-clip: padding-box; outline: 0; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000; } .modal-backdrop.fade { opacity: 0; filter: alpha(opacity=0); } .modal-backdrop.in { opacity: 0.5; filter: alpha(opacity=50); } .modal-header { padding: 15px; background-color: #2597cd; border-bottom: 1px solid #e5e5e5; } .modal-header .close { margin-top: -2px; } .modal-title { margin: 0; line-height: 1.42857143; } .modal-body { position: relative; padding: 20px; color: #000000; font-family: 'Source Sans Pro', sans serif; font-size: 16px; } .modal-footer { padding: 20px; text-align: right; border-top: 1px solid #e5e5e5; } .modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; } .modal-footer .btn-group .btn + .btn { margin-left: -1px; } .modal-footer .btn-block + .btn-block { margin-left: 0; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } @-webkit-keyframes popIn { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(1.2, 1); transform: scale(1.2, 1); } 50% { -webkit-transform: scale(1.4, 1); transform: scale(1.4, 1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes popIn { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(1.2, 1); transform: scale(1.2, 1); } 50% { -webkit-transform: scale(1.4, 1); transform: scale(1.4, 1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes popOut { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(1.2, 1); transform: scale(1.2, 1); } 50% { -webkit-transform: scale(1.4, 1); transform: scale(1.4, 1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes popOut { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(1.2, 1); transform: scale(1.2, 1); } 50% { -webkit-transform: scale(1.4, 1); transform: scale(1.4, 1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes splashIn { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 25% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.8; } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .9; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes splashIn { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 25% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.8; } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .9; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes splashOut { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 25% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.8; } 50% { -webkit-transform: scale(1); transform: scale(1); opacity: .9; } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } } @keyframes splashOut { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 25% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.8; } 50% { -webkit-transform: scale(1); transform: scale(1); opacity: .9; } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } } /******************************************************* Main Slider basics *******************************************************/ .checkbox-toggle { position: relative; } .checkbox-toggle input { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 0%; height: 0%; margin: 0 0; cursor: pointer; zoom: 1; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; filter: alpha(opacity=0); } .checkbox-toggle input + span { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-toggle input + span:before { position: absolute; left: 0px; display: inline-block; } .checkbox-toggle input + span > h4 { display: inline; } /******************************************************* Main Slider *******************************************************/ .checkbox-slider { position: relative; } .checkbox-slider input { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 0%; height: 0%; margin: 0 0; cursor: pointer; zoom: 1; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; filter: alpha(opacity=0); } .checkbox-slider input + span { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-slider input + span:before { position: absolute; left: 0px; display: inline-block; } .checkbox-slider input + span > h4 { display: inline; } .checkbox-slider input + span { padding-left: 40px; } .checkbox-slider input + span:before { content: ""; height: 20px; width: 40px; background: rgba(100, 100, 100, 0.2); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8); transition: background 0.2s ease-out; } .checkbox-slider input + span:after { width: 20px; height: 20px; position: absolute; left: 0px; top: 0; display: block; background: #ffffff; transition: margin-left 0.1s ease-in-out; text-align: center; font-weight: bold; content: ""; } .checkbox-slider input:checked + span:after { margin-left: 20px; content: ""; } .checkbox-slider input:checked + span:before { transition: background 0.2s ease-in; } .checkbox-slider--b-flat { position: relative; } .checkbox-slider--b-flat input { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 0%; height: 0%; margin: 0 0; cursor: pointer; zoom: 1; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; filter: alpha(opacity=0); } .checkbox-slider--b-flat input + span { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-slider--b-flat input + span:before { position: absolute; left: 0px; display: inline-block; } .checkbox-slider--b-flat input + span > h4 { display: inline; } .checkbox-slider--b-flat input + span { padding-left: 40px; } .checkbox-slider--b-flat input + span:before { content: ""; height: 20px; width: 40px; background: rgba(100, 100, 100, 0.2); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8); transition: background 0.2s ease-out; } .checkbox-slider--b-flat input + span:after { width: 20px; height: 20px; position: absolute; left: 0px; top: 0; display: block; background: #ffffff; transition: margin-left 0.1s ease-in-out; text-align: center; font-weight: bold; content: ""; } .checkbox-slider--b-flat input:checked + span:after { margin-left: 20px; content: ""; } .checkbox-slider--b-flat input:checked + span:before { transition: background 0.2s ease-in; } .checkbox-slider--b-flat input + span { padding-left: 40px; } .checkbox-slider--b-flat input + span:before { border-radius: 20px; width: 40px; } .checkbox-slider--b-flat input + span:after { background: #ffffff; content: ""; width: 20px; border: solid transparent 2px; background-clip: padding-box; border-radius: 20px; } .checkbox-slider--b-flat input:not(:checked) + span:after { -webkit-animation: popOut ease-in 0.3s normal; animation: popOut ease-in 0.3s normal; } .checkbox-slider--b-flat input:checked + span:after { content: ""; margin-left: 20px; border: solid transparent 2px; background-clip: padding-box; -webkit-animation: popIn ease-in 0.3s normal; animation: popIn ease-in 0.3s normal; } .checkbox-slider--b-flat input:checked + span:before { background: #5cb85c; } .checkbox-slider--b-flat.checkbox-slider-md input + span:before { border-radius: 30px; } .checkbox-slider--b-flat.checkbox-slider-md input + span:after { border-radius: 30px; } .checkbox-slider--b-flat.checkbox-slider-lg input + span:before { border-radius: 40px; } .checkbox-slider--b-flat.checkbox-slider-lg input + span:after { border-radius: 40px; } .checkbox-slider--b-flat input + span:before { box-shadow: none; } .checkbox-slider-md { line-height: 30px; } .checkbox-slider-md input + span { padding-left: 60px; } .checkbox-slider-md input + span:before { width: 60px; } .checkbox-slider-md input + span:after, .checkbox-slider-md input + span:before { height: 30px; line-height: 30px; } .checkbox-slider-md input + span:after { width: 30px; vertical-align: middle; } .checkbox-slider-md input:checked + span:after { margin-left: 30px; }
$(function() { $( '#addMail' ).on('change', function (){ if (this.checked) { $("#mailCC").show(); } else { $("#mailCC").hide(); } }); });

Related: See More


Questions / Comments: