Bootstrap Snippet Fine Modals and Media Objects using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<! DOCTYPE html>
<html>
<head>
    
</head>
<body>
<div class="container">
    
    <div class="media">
      <a class="pull-left" data-toggle="modal" data-target="#modalOne" href="#">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjZWVlIi8+PHRleHQgdGV4dC1hbmNob3I9Im1pZGRsZSIgeD0iMzIiIHk9IjMyIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+NjR4NjQ8L3RleHQ+PC9zdmc+" style="width: 64px; height: 64px;" class="media-object" data-src="holder.js/64x64" alt="64x64">
      </a>
      
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        <div class="well">Cras sit amet nibh libero, in gravida nulla. Nulla vel <a data-toggle="modal" data-target="#modalFour"><strong>location</strong></a>  scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
      </div>
      <!--Modal Start #modalThree -->
<div class="modal fade" id="modalFour" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only"></span></button>
        <h5 class="text-center">Your Position</h5>
      </div>
      <div class="modal-body">
        <!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src=https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d75218.02848588771!2d11.46213885!3d53.90396385!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sde!4v1404555168414" "></iframe>
</div>
       
      </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.modal-footer{
    background:black;
    -moz-border-radius-topleft: 22px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:23px;
    -webkit-border-top-left-radius:22px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:23px;
    border-top-left-radius:22px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:23px;
    margin-top:1em;
     -moz-box-shadow: 2px 0px 17px  #000000;
    -webkit-box-shadow: 2px 0px 17px  #000000;
    box-shadow: 2px 0px 17px  #000000;
            
}
.modal::p{
    text-align:justified;
    
    }
.media-heading{
        text-align:center;
    
    }
.modal-content{background:silver;
   padding:1em;
}
 .modal-header{
   
    -moz-box-shadow: 0px 2px 17px  #000000;
    -webkit-box-shadow: 0px 2px 17px  #000000;
    box-shadow: 0px 2px 17px  #000000;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
    container: 'body'
});
$('[data-toggle="popover"]').popover({
    trigger: 'hover',
    container: 'body',
    delay: { show: 150, hide: 100 }
    
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Fine Modals and Media Objects"
Bootstrap 3.2.0 Snippet by Marnoweb

Related: See More

Questions / Comments:

"Fine Modals and Media Objects" Bootstrap 3.2.0 Snippet by Marnoweb

Related: See More

Questions / Comments:

"Fine Modals and Media Objects"
Bootstrap 3.2.0 Snippet by Marnoweb