Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

bootstrap modal on clicking a pic

Tags:

javascript

html

jquery

css

twitter-bootstrap

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 .

like image 871
jane Avatar asked Nov 17 '16 04:11

jane

2 Answers

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/

like image 155
Minal Chauhan Avatar answered Oct 12 '22 17:10

Minal Chauhan

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

Try It Once This is works fine .

like image 27
Samudrala Ramu Avatar answered Oct 12 '22 16:10

Samudrala Ramu
Sign in to Comment

Related questions

Remove element from array on timeout Node.js
Angular 2: Active Router link and routerLinkActiveOptions for dynamically generated links
JavaScript - difference between Date(), new Date(), and ISODate
Remove DOM in react.js,
How to get indexOf location of a value in nested array in javascript?
jasmine partial string matching
how to display json array elements dynamically into select tag?
Consume internal javascript file from typescript
NodeJS TypeError: Cannot read property of undefined
Searching validityState for values
What does require() actually return, the file or the function
Can For-In loop result an undefined or null?
Native Menus not showing OS X Electron
Cannot use letter x to start html attribute in Angular
How to modify/retransform JSON array structure
Observable.of turn async
How much ES6 classes differ from ES5 style?
Does Bluebird "map" return early?
wrap content in a div using jquery
How to parse yyyy-MM-dd HH:mm:ss.SSS format date in javascript?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!