jane jane - 21 days ago 6
CSS Question

bootstrap modal on clicking a pic

I have created a modal here just below the pic saying "click for details".

enter image description here

Can we create the same modal,which would work on clicking the picture of the person.

code :



/* CSS Document */

/* Float Elements
---------------------------------*/

.fl-lt {
float: left;
}
.fl-rt {
float: right;
}
/* Clear Floated Elements
---------------------------------*/

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.figure {
margin: 0px;
}
img {
max-width: 100%;
}
a,
a:hover,
a:active {
outline: 0px !important
}
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Primary Styles
---------------------------------*/

body {
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
color: #888888;
margin: 0;
}
h2 {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
margin: 0 0 15px 0;
text-align: center;
text-transform: uppercase;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #222222;
font-size: 16px;
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: 400;
}
h6 {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
margin: 0 0 60px 0;
}
p {
line-height: 24px;
margin: 0;
}
/* Header Styles
---------------------------------*/

.header {
text-align: center;
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 280px 0;
}
.logo {
width: 130px;
margin: 0 auto 35px;
}
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 400;
letter-spacing: -1px;
margin: 0 0 22px 0;
color: #fff;
}
.we-create {
padding: 0;
margin: 35px 0 55px;
}
.wp-pic {
margin-bottom: 20px;
}
.we-create li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #bcbcbc;
text-transform: uppercase;
font-weight: 400;
margin: 0 5px 0 0;
padding: 0 0 0 15px;
}
.we-create li:first-child {
background: none;
}
.start-button {
padding-left: 0px;
}
.start-button li a {
color: #fff;
}
.link {
padding: 15px 35px;
background: #7cc576;
color: #fff !important;
font-size: 16px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
display: inline-block;
border-radius: 3px;
text-transform: uppercase;
line-height: 25px;
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
text-decoration: none;
color: #7cc576 !important;
background: #fff;
}
.link:active,
.link:focus {
background: #7cc576;
text-decoration: none;
color: #fff !important;
}
/* Team
---------------------------------*/

.team-leader-block {
max-width: 993px;
margin: 0 auto;
}
.team-leader-box {
width: 30.66%;
margin-right: 3.82979%;
height: 490px;
overflow: hidden;
text-align: center;
float: left;
}
.team-leader-box span {
margin-bottom: 24px;
display: block;
}
.team-leader-box:nth-of-type(3n+0) {
margin: 0;
}
.team-leader {
width: auto;
height: auto;
position: relative;
border-radius: 50%;
box-shadow: 0px 0px 0px 7px rgba(241, 241, 241, 0.80);
margin: 7px 7px 25px 7px;
}
.team-leader-shadow {
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
border-radius: 50%;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
border-radius: 50%;
}
.team-leader-shadow a {
display: block;
width: 100%;
height: 100%;
}
.team-leader:hover .team-leader-shadow {
box-shadow: inset 0px 0px 0px 148px rgba(17, 17, 17, 0.80);
}
.team-leader:hover ul {
display: block;
opacity: 7
}
.team-leader img {
display: block;
border-radius: 50%;
}
.team-leader ul {
display: block;
opacity: 0;
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
margin-top: -14px;
z-index: 15;
transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
}
/*change hover text*/

.team-leader ul p2 {
display: inline;
font-size: 25px;
color: blue;
text-align: center;
cursor: pointer;
cursor: hand;
}
.
/* Footer
---------------------------------*/

.footer {
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 35px 0 35px;
}
.footer-logo {
margin: 15px auto 35px;
width: 76px;
}
.copyright,
.credits {
color: #cccccc;
font-size: 14px;
display: block;
text-align: center;
}
.copyright a,
.credits a {
color: #7cc576;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
/* Animation Timers
---------------------------------*/

.delay-02s {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.delay-03s {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.delay-04s {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.delay-05s {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.delay-06s {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.delay-07s {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.delay-08s {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.delay-09s {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.delay-1s {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.delay-12s {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
#team.main-section.team {
background-color: #e6e6e6;
}

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">

<title>Homepage</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<!-- related to number count -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>

<link rel="stylesheet" href="css/style1.css">

<!-- number count ends -->

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">

<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->

<!-- <script type="text/javascript" src="js/jquery.1.8.3.min.js"></script> -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="contactform/contactform.js"></script>


</head>

<body>
<header class="header" id="header">
<!--header-start-->

</header>
<!--header-end-->


<section class="main-section team" id="team">
<!--main-section team-start-->
<div class="container">
<h2>Medals</h2>
<h6></h6>
<div class="team-leader-block clearfix">
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-03s">
<div class="team-leader-shadow">
<a href="#"></a>
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<ul>
<p2>Click For Details</p2>
</ul>
</div>
<!-- Large modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
click for Details
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...


</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>
</div>
</div>
</div>


<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>

</div>
</div>

</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
<a href="#"></a>
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<ul>
<p2>Click For Details</p2>
</ul>
</div>



<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-09s">
<div class="team-leader-shadow">
<a href="#"></a>
</div>
<img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
<ul>
<p2>Click For Details</p2>
</ul>
</div>

<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>



</div>
<!-- team-leader-box div ends -->
</div>
<!-- team-leader-block clearfix div ends -->



<!-- popup div ends -->
</div>
<!-- container div ends -->
</section>
<!--main-section team-end-->




<footer class="footer">
<div class="container">
<div class="footer-logo">
<a href="#">
<img src="img/footer-logo.png" alt="">
</a>
</div>
<span class="copyright">&copy; Knight Theme. All Rights Reserved</span>
<div class="credits">

<a href="https://bootstrapmade.com/free-business-bootstrap-themes-website-templates/">Business Bootstrap Themes</a> by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer>
<script src="js1/index1.js">
</script>
</body>

</html>





Live website to check in the browser : http://79.170.44.120/shivams.com/

Kindly help .

Answer

Add data-toggle and data-target on the ul where write text

<ul data-toggle="modal" data-target="#myModal">
    <p2>Click For Details</p2>
</ul>

Hope this works :)

Updated code:

<div class="team-leader  wow fadeInDown delay-06s">
   <div class="team-leader-shadow">
      <a href="#" data-toggle="modal" data-target="#myModal"> Click For Details</a>
   </div>
   <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
   <!-- <ul> Remove this ul move text in a tag
       <p2>Click For Details</p2>
    </ul> -->
 </div>

CSS:

.team-leader-shadow a {
  display: flex;
    width: 100%;
    height: 100%;  
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
    font-size: 20px;
    opacity: 0;
    color: #fff;
    text-decoration:none;
}
.team-leader:hover .team-leader-shadow  a{
  opacity:1; 
}

Updated working code here : https://jsfiddle.net/j7xpLq28/