如何解决HTML CSS框-在框内单击时触发Bootstrap Modal的问题
我的代码很乱,我知道。我真的只需要一些帮助。
我有一系列的两个代码,人们需要为其定义。当有人将鼠标悬停在代码1和代码2上时,它会变成深蓝色。那部分工作正常。我希望有人单击“块”或在<article>
和</article>
标记内时弹出Bootstrap Modal。使用按钮会很容易,但是我的用户不希望使用按钮。我在这里迷路了,我浏览了各种论坛,codepens等,只是找不到解决方案。我知道我这里杂乱无章,但是我是在这里清理问题并解决问题。预先谢谢你。
<main>
<article><b>Code 1</b><br><br>
<div class="wrap">
<a href="#" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-new">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="body-message">
<h4>Code 1 Title</h4>
<p>Code 1 Definition
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</a>
</article>
<article><b>Code 2</b><br>
<div class="wrap">
<a href="#" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-new">
</div>
<div class="modal fade bs-example-modal-new" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="body-message">
<h4>Code 2 Title</h4>
<p>Code 2 Definition
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</a>
</article>
</main>
<style>
* {
box-sizing: border-box;
}
main {
max-width: 1100px;
margin: 15px auto;
padding: 0 15px;
width: 100%;
display: grid;
/* Define Auto Row size */
grid-auto-rows: 215px;
/*Define our columns */
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
grid-gap: 1em;
}
article {
border-radius: 10px;
padding: 10px;
color: #fff;
background-color: #55BBE9
}
article:hover {
background-color: #1B2631;
}
modal-body {background-color: #55BBE9
}
</style>
解决方法
在 data-toggle="modal" data-trigger="click" data-target=".bs-example-modal-new"
标签中添加<article>
。
示例here
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。