Advertisement
hubert17

Bootstrap iFrame inside Bootstrap modal snippet

Sep 29th, 2014
446
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.45 KB | None | 0 0
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.     <head>
  5.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.         <meta charset="utf-8">
  7.         <title>Bootply.com - Bootstrap iFrame inside Bootstrap modal</title>
  8.         <meta name="generator" content="Bootply" />
  9.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  10.         <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  11.        
  12.         <!--[if lt IE 9]>
  13.          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  14.        <![endif]-->
  15.         <link rel="shortcut icon" href="/bootstrap/img/favicon.ico">
  16.         <link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png">
  17.         <link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png">
  18.         <link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png">
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.         <!-- CSS code from Bootply.com editor -->
  30.        
  31.         <style type="text/css">
  32.            
  33.         </style>
  34.     </head>
  35.    
  36.     <!-- HTML code from Bootply.com editor -->
  37.    
  38.     <body  >
  39.        
  40.         <a href="#" class="btn" id="openBtn">Open modal</a>
  41.  
  42. <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog">
  43.     <div class="modal-header">
  44.         <button type="button" class="close" data-dismiss="modal">×</button>
  45.             <h3>Dialog</h3>
  46.     </div>
  47.     <div class="modal-body">
  48.       <iframe src="" style="zoom:0.60" width="99.6%" height="250" frameborder="0"></iframe>
  49.     </div>
  50.     <div class="modal-footer">
  51.         <button class="btn" data-dismiss="modal">OK</button>
  52.     </div>
  53. </div>
  54.        
  55.         <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  56.  
  57.  
  58.         <script type='text/javascript' src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  59.  
  60.  
  61.  
  62.  
  63.  
  64.  
  65.        
  66.         <!-- JavaScript jQuery code from Bootply.com editor  -->
  67.        
  68.         <script type='text/javascript'>
  69.        
  70.         $(document).ready(function() {
  71.        
  72.             var frameSrc = "/login";
  73.  
  74. $('#openBtn').click(function(){
  75.     $('#myModal').on('show', function () {
  76.  
  77.         $('iframe').attr("src",frameSrc);
  78.      
  79.     });
  80.     $('#myModal').modal({show:true})
  81. });
  82.        
  83.         });
  84.        
  85.         </script>
  86.        
  87.        
  88.     </body>
  89. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement