bootstrap modal при нажатии на pic

Question

Я создал модальный здесь чуть ниже рисунка, говорящего «нажмите для подробностей».

Можем ли мы создать такой же модальность, который будет работать по нажатию на изображение человека.

код:

/* 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>

Живой сайт, чтобы проверить в браузере: http://79.170.44.120/shivams.com/

Пожалуйста, помогите.

Answer 1

Добавить data-toggle и data-target на ul, где текст записи

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

Надеется, что это работает :)

Обновленный код:

<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; 
} 

Обновленный рабочий код здесь: https://jsfiddle.net/j7xpLq28/

Answer 2

<img src="http://placehold.it/300x200.jpg" alt="" data-toggle="modal" data-target="#myModal"/> 

Используйте данные для переключения и цели данных на изображении.

Оба переключателя данных и цель данных используются для соединения любого элемента с определенным модальным. data-toggle говорит, что для переключения модального и целевого данных данных указывается, какой модальный для открытия.

Надеется, что это помогает :)

Answer 3

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

разок попробовать Это работает отлично.

Answer 4

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <!-- Trigger the modal with a button --> 
 
    <img src="http://www.indianfunpic.com/wp-content/uploads/2016/06/Funny-Kids-14.jpg" height='100' width='100' data-toggle="modal" data-target="#myModal"> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

Только в этом играет ключевую роль `` `` v

<img src="http://www.indianfunpic.com/wp-content/uploads/2016/06/Funny-Kids-14.jpg" height='100' width='100' data-toggle="modal" data-target="#myModal">