3

我的网站上有几个可用的模式框，我正在尝试添加一个新的。现有的框只有纯文本，没有问题。

新的模态正文中有一个 IMG，但是当我刷新页面时，模态框已加载并位于我的网站顶部，如果我删除图像，它会按预期工作（减去图像）

链接代码：

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

模态框：

http://jsfiddle.net/wan4q/

有什么建议么？

4

3 回答 3

6

请检查此链接，其中包含带有图像的工作模式。

代码：

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

此链接到带有图像和文本的工作模式

于 2013-09-15T14:37:22.543 回答
1

这段代码运行良好。可能你可能没有包含 jquery 和 bootstrap js 文件

<!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>

使用此代码，我已将您的内容放在我的模态中并且它工作正常。我使用了另一张图片来试用您的代码。

享受干杯！！！

于 2013-09-15T12:09:22.233 回答
0

我想包括这个，因为我搜索了几天来寻找这个关于为什么图像破坏了引导模式中的 css 的答案。我将此添加到底部，因为答案隐藏在页面顶部的所有评论中，其他人可能正在寻找它。

对我有用的实际答案是 Girish Gowda 提供的 CSS 的变化。我想在信用到期的地方给予信用。

所以最后一.modal节课应该是这样的......

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

我会说我最终将 更改left: 20%为40%因为我的模态显示在屏幕左侧，但除此之外，这解决了图像引起的所有 CSS 混淆问题。感谢 Girish Gowda 的回答。

于 2015-10-01T22:33:16.970 回答