FS Modal BS + JQuery

FS Modal BS + JQuery - Andrew Pougher

by Andrew Pougher

HTML

<a href="#productModal" class="readmore btn btn-xs btn-default" data-toggle="modal">More details</a>

                               <!-- book Modal master -->
    <div class="product-modal modal fade" id="productModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
	                     
	                         		
	                         	
                           
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>  
    <script>
	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');
  </script>

CSS

body{background:#cc1100}/* MODAL */

.product-modal .modal-content {
    padding: 100px 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    text-align: center;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: rgba(0,0,0,0.98);
    color:white;
}

.product-modal .modal-content h2 {
    margin: 0;
    font-size: 3em;
}

.product-modal .modal-content .item-details {
    margin: 30px 0;
}

.product-modal .close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
}

.product-modal .close-modal:hover {
    opacity: .3;
}

.product-modal .close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    background-color: #ececec;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.product-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 75px;
    background-color: #ececec;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

@media screen and (max-height: 30.5em) {
.product-modal p {
	font-size:16px
	}
}

@media screen and (max-width: 34em) {
	.product-modal  p{
	font-size:18px
	}
}


@media screen and (max-width: 25em) {
	.product-modal p{
	font-size:22px
	}
}

JavaScript

$("#productModal").on("show.bs.modal", function (e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").html('<h2><i class="fa fa-gavel"></i> Please contact Andrew about use of this code</h2><p>Under regulation 34a of the room mate agreement you may not use this code . Did you know Google are listening in on your laptop mic? Under regulation 34a of the room mate agreement you may not use this code . Did you know Google are listening in on your laptop mic? Under regulation 34a of the room mate agreement you may not use this code . Did you know Google are listening in on your laptop mic? Under regulation 34a of the room mate agreement you may not use this code . Did you know Google are listening in on your laptop mic? Under regulation 34a of the room mate agreement you may not use this code . Did you know Google are listening in on your laptop mic? Under regulation 34a of the room mate agreement you may not use this code . Did you know Google are listening in on your laptop mic? Under regulation 34a of the room mate agreement you may not use this code . Did you know Google are listening in on your laptop mic? Under regulation 34a of the room mate agreement you may not use this code . Did you know Google are listening in on your laptop mic? </p>' + Math.floor(Math.random() * 101));
});

// kill
$('#productModal').on('hidden.bs.modal', function () {
    $(this).removeData('bs.modal');
});