我的网站上有几个可用的模态框，我正在尝试添加一个新的。现有的框只有纯文本，没有问题。
新的模态正文中有一个 IMG，但是当我刷新页面时，模态框已加载并位于我的网站顶部，如果我删除图像，它会按预期工作（减去图像）
链接代码：
<a href="#clarissa" role="button" data-toggle="modal">Clarissa Bonnel</a>
模态框：
有什么建议吗？
【问题讨论】：
标签： html css image twitter-bootstrap
我想包括这个，因为我搜索了几天来寻找这个关于为什么图像在引导模式中破坏 css 的答案。我将此添加到底部，因为答案隐藏在页面顶部的所有 cmets 中，其他人可能正在寻找它。
对我有用的实际答案是 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 的回答。
【讨论】：
请检查此link，其中包含带图像的工作模式。
代码：
<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">×</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>
此link 使用图像和文本工作模式
【讨论】：
这段代码运行良好。可能你没有包含 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">× </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>
使用此代码，我已将您的内容放在我的模态中并且它工作正常。我使用了另一张图片来试用您的代码。
享受干杯！！！
【讨论】：