CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
BHWD
BHWD

Reputation: 123

Using <img> in Bootstrap Modal Box

I have a couple of working modal boxes on my site and I am trying to add a new one. The existing boxes only have plain text and have not been an issue.

The new one has an IMG in the modal body but when I refresh the page the modal box is loaded and sits at the top of my site, if I remove the image it works as expected (minus the image)

Link code:

<a href="#clarissa" role="button" data-toggle="modal">Clarissa Bonnel</a>

Modal Box:

http://jsfiddle.net/wan4q/

Any suggestions?

Upvotes: 3

Views: 16071

Answers (3)

Vincent
Vincent

Reputation: 83

I wanted to include this because I searched for days for this answer as to why an image broke the css in the bootstrap modal. I am adding this to the bottom because the answer is hidden within all the comments at the top of the page and others may be looking for it.

The actual answer that worked for me was the change in the CSS that Girish Gowda provided. I wanted to give credit where credit is due.

so final .modal class should look like this... 

.modal {
    left: 20%; 
    right: 20%; 
    top: 10%; 
    bottom: 10%; 
    width: 60%; 
    overflow: auto; 
    position: fixed; 
    z-index: 2000; 
    display: none; 
}

I will say that I did end up changing the left: 20% to 40% as my modal was showing up off the left side of the screen, but other than that this fixed all the CSS confusion problems that the image caused. Thank you to Girish Gowda for the answer.

Upvotes: 0

Girish Thimmegowda
Girish Thimmegowda

Reputation: 2169

Please check this link which contains the working modal with image.

Code:

<head>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
</head>

<body>

<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
        <img class="img-responsive" src="http://vmatechs.com/wp-content/uploads/2013/07/android.jpg" alt="image" />
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
 </div><!-- /.modal -->  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<body>

this link to working modal with image and text

Upvotes: 6

Amit
Amit

Reputation: 2565

This code is working perfectly well. May be you might not have included the jquery and bootstrap js files

<!doctype html>
<html lang="en">
<head>
 <title>Amit Wecomes you</title>
    <link type="text/css" rel="Stylesheet" href="bootstrap/css/bootstrap.min.css" />    
</head>
<body>
<a href="#clarissa" role="button" data-toggle="modal">Clarissa Bonnel</a>
<!-- Modal -->
 <div id="clarissa" class="modal hide fade" tabindex="-1" role="dialog" aria-   labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">
   <h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;   </button></p>
     </div>
     <div class="modal-body">
         <img src="images/amit.jpg" align="left"/>
         I am Clarissa. I am also 34 years old,    half Italian - half French with a little Australian and Romanian twist. I speak 5 languages. My career has been a roller coaster in terms of locations and roles. For more than 11 years, I have lived and worked across the globe, mainly in international organisations, media and professional services, in journalism, sales, client relationship management and event organising. Throughout this journey, I have met a lot of people who have become frustrated because of a mismatch between their goal in life and their current situation without any plan for them to get what they want and deserve.
     </div>
   </div>

   <!-- End Modal -->
<script src="bootstrap/js/jquery.js" type="text/javascript"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>    
</body>
</html>

Use this code, I have placed your content inside my modal and its working fine. I used another image to try out your code.

Enjoy Cheers!!!

Upvotes: 1

Related Questions