gpt4 book ai didi

html - 在 Bootstrap 模态框中使用

转载 作者:搜寻专家 更新时间:2023-10-31 22:31:10 25 4
gpt4 key购买 nike

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

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

链接代码:

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

模态框:

http://jsfiddle.net/wan4q/

有什么建议吗?

最佳答案

请检查这个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">&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>

这个link使用图像和文本工作模态

关于html - 在 Bootstrap 模态框中使用 <img>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18812033/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com