Created
August 19, 2016 13:06
-
-
Save asha23/3d3131ecdbcb8599fcbc222cbaa33e9b to your computer and use it in GitHub Desktop.
iFrame inside Bootstrap 3 modal
This file contains hidden or 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
| <html lang="it_IT"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xs-12"> | |
| <div class="page"> | |
| <button type="button" class="modalButton" data-toggle="modal" data-src="https://player.vimeo.com/video/87701971" data-width="500" data-height="281" data-target="#myModal" data-video-fullscreen="">Vimeo</button> | |
| <button type="button" class="modalButton" data-toggle="modal" data-src="https://www.youtube.com/embed/mWRsgZuwf_8" data-width="640" data-height="360" data-target="#myModal" data-video-fullscreen="">Youtube</button> | |
| <button type="button" class="modalButton" data-toggle="modal" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d91737.51273778046!2d12.566428499999994!3d44.06689465000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132cc3a48fa6592b%3A0xc1f284db17f1449d!2sRimini+RN!5e0!3m2!1sit!2sit!4v1427492339750" data-width="600" data-height="450" data-target="#myModal">Google maps</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="modal fade" id="myModal"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-body"> | |
| <div class="close-button"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| </div> | |
| <div class="embed-responsive embed-responsive-16by9"> | |
| <iframe class="embed-responsive-item" frameborder="0"></iframe> | |
| </div> | |
| </div> | |
| </div><!-- /.modal-content --> | |
| </div><!-- /.modal-dialog --> | |
| </div><!-- /.modal --> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or 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
| ( function($) { | |
| function iframeModalOpen(){ | |
| // impostiamo gli attributi da aggiungere all'iframe es: data-src andrà ad impostare l'url dell'iframe | |
| $('.modalButton').on('click', function(e) { | |
| var src = $(this).attr('data-src'); | |
| var width = $(this).attr('data-width') || 640; // larghezza dell'iframe se non impostato usa 640 | |
| var height = $(this).attr('data-height') || 360; // altezza dell'iframe se non impostato usa 360 | |
| var allowfullscreen = $(this).attr('data-video-fullscreen'); // impostiamo sul bottone l'attributo allowfullscreen se è un video per permettere di passare alla modalità tutto schermo | |
| // stampiamo i nostri dati nell'iframe | |
| $("#myModal iframe").attr({ | |
| 'src': src, | |
| 'height': height, | |
| 'width': width, | |
| 'allowfullscreen':'' | |
| }); | |
| }); | |
| // se si chiude la modale resettiamo i dati dell'iframe per impedire ad un video di continuare a riprodursi anche quando la modale è chiusa | |
| $('#myModal').on('hidden.bs.modal', function(){ | |
| $(this).find('iframe').html(""); | |
| $(this).find('iframe').attr("src", ""); | |
| }); | |
| } | |
| $(document).ready(function(){ | |
| iframeModalOpen(); | |
| }); | |
| } ) ( jQuery ); |
This file contains hidden or 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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> |
This file contains hidden or 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
| @import "compass/css3"; | |
| .page { | |
| padding: 15px 0px 0px; | |
| } | |
| .modalButton { | |
| display: block; | |
| margin: 15px auto; | |
| padding: 5px 15px; | |
| } | |
| .modal-dialog { | |
| .close-button { | |
| overflow: hidden; | |
| button.close { | |
| font-size: 30px; | |
| line-height: 30px; | |
| padding: 7px 4px 7px 13px; | |
| @include text-shadow(none); | |
| @include opacity(.7); | |
| color:#fff; | |
| span { | |
| display: block; | |
| } | |
| &:hover, | |
| &:focus { | |
| @include opacity(1); | |
| outline: none; | |
| } | |
| } | |
| } | |
| .modal-content { | |
| box-shadow: none; | |
| background-color: transparent; | |
| border: 0; | |
| iframe { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| } | |
| } |
This file contains hidden or 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
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment