在Bootstrap模式框中使用<img>

Question

在Bootstrap模式框中使用<img>

BHW*_*HWD 3 html css image twitter-bootstrap

我的网站上有几个工作模式框,我正在尝试添加一个新模块框.现有的盒子只有纯文本,并不是问题.

新的一个在模态体中有一个IMG,但当我刷新页面时,模态框被加载并位于我的网站顶部,如果我删除它按预期工作的图像(减去图像)

链接代码:

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

Run Code Online (Sandbox Code Playgroud)

模态框:

http://jsfiddle.net/wan4q/

有什么建议？

Answer 1

Gir*_*wda 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>

Run Code Online (Sandbox Code Playgroud)

这个链接到工作模式与图像和文本

归档时间：	11 年，12 月前
查看次数：	14608 次
最近记录：	9 年，11 月前