首页 > 代码库 > 模态框遇到的那些事
模态框遇到的那些事
在做项目时使用到了模态框，一不小心出了错误，大家来看看问题出现在那里吧！
这里面有三个模态框，我就拿一个来举例吧！
开始我是这样写的【出错的代码】：
<!--暂停-->
<li data-toggle="modal" data-target="#myModal1">
<a href=http://www.mamicode.com/"#">暂停</a>
<div class="modal fade" id="myModal1">
<!-- 窗口声明 -->
<div class="modal-dialog modal-lg">
<!-- 内容声明 -->
<div class="modal-content">
<p><img src=http://www.mamicode.com/"../images/BrushProblem/cut.jpg" alt=""></p>
<p>休息一会<span>放松一下</span></p>
<p><button class="btn btn-default" data-dismiss="modal">继续</button></p>
</div>
</div>
</div>
</li>
我把data-toggle="modal" data-target="#myModal1"误写在了模态框的父级上之后就出现了这样的问题。
当点击暂停时他很完美的弹出了我想要的结果：
然而并没有完，当我想要继续时他又弹出了一个黑框，如下：
都是因为data-toggle="modal" data-target="#myModal1"放错了位置才造成了这些错误。
来看看实现这些效果的完美代码吧！
HTML:
Html: <div class="Y_containerTopRight"> <ul> <li> <p style="height: 90px"><img src=http://www.mamicode.com/"../images/BrushProblem/BrushProblem_clock.png" alt="时钟" style="height: 74px;width: 74px;margin-top: 17px"/></p> <p style="height: 60px;width: 175px;line-height: 50px;font-size: 20px;color: #485c64">作答时间<span style="color: #2f3432">03:24</span></p> </li> <!--暂停--> <li data-toggle="modal" data-target="#myModal1"> <a href=http://www.mamicode.com/"#">暂停</a> <div class="modal fade" id="myModal1"> <!-- 窗口声明 --> <div class="modal-dialog modal-lg"> <!-- 内容声明 --> <div class="modal-content"> <p><img src=http://www.mamicode.com/"../images/BrushProblem/cut.jpg" alt=""></p> <p>休息一会<span>放松一下</span></p> <p><button class="btn btn-default" data-dismiss="modal">继续</button></p> </div> </div> </div> </li> <!--交卷--> <li> <a href=http://www.mamicode.com/"#" data-toggle="modal" data-target="#myModal2">交卷</a> <div class="modal fade" id="myModal2"> <!-- 窗口声明 --> <div class="modal-dialog modal-lg modal-dialogOk"> <!-- 内容声明 --> <div class="modal-content modal-contentOk"> <!-- 头部 --> <div class="modal-header"> <p><img src=http://www.mamicode.com/"../images/BrushProblem/ok.jpg" alt=""></p> <p>您还有题目未做完，是否交卷?</p> </div> <!-- 注脚 --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">是</button> <button type="button" class="btn btn-default" data-dismiss="modal">保存,下次继续做</button> <button type="button" class="btn btn-default" data-dismiss="modal">否</button> </div> </div> </div> </div> </li> <!--保存--> <li> <a href=http://www.mamicode.com/"#" class="" data-toggle="modal" data-target="#myModal3">保存</a> <div class="modal fade" id="myModal3"> <!-- 窗口声明 --> <div class="modal-dialog modal-lg"> <!-- 内容声明 --> <div class="modal-content modal-contentBreserved"> <span><img src=http://www.mamicode.com/"../images/BrushProblem/right2.jpg" alt=""></span> <span>保存成功</span> </div> </div> </div> </li> </ul> </div>
style：
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none; }
.Y_containerTopRight {
margin: 50px auto;
width: 175px;
height: 265px;
border-radius: 5px;
border: 1px solid #989898; }
.Y_containerTopRight ul {
font-family: 微软雅黑;
text-align: center;
list-style: none; }
.Y_containerTopRight ul li:nth-child(1) {
width: 175px;
height: 140px;
border-bottom: 1px solid #989898; }
.Y_containerTopRight ul li:nth-child(2) {
width: 175px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #989898; }
.Y_containerTopRight ul li:nth-child(3) {
width: 175px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #989898; }
.Y_containerTopRight ul li:nth-child(4) {
width: 175px;
height: 40px;
line-height: 40px; }
.Y_containerTopRight ul a {
color: #636864;
text-decoration: none;
width: 100%;
height: 100%;
font-family: 微软雅黑; }
/*模态框 样式*/
p {
padding: 0;
margin: 0; }
.modal-backdrop.in {
filter: alpha(opacity=3);
opacity: 0.3; }
.modal.in .modal-dialog {
margin-top: 259px;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0); }
.modal-content {
border: 1px solid #cfcfcf;
width: 487px;
height: 318px;
border-radius: 5px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto; }
.modal-content p {
font-size: 22px;
color: #5bc8c2;
font-weight: bold; }
.modal-content p:nth-child(1) {
margin-top: 64px; }
.modal-content p:nth-child(2) {
margin-top: 28px;
margin-bottom: 38px; }
.modal-content p:nth-child(2) span {
display: inline-block;
margin-left: 21px; }
.modal-content p:nth-child(3) button {
width: 135px;
height: 40px;
color: #727473; }
.modal-contentOk {
border: 1px solid #cfcfcf;
width: 433px;
height: 295px;
border-radius: 5px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto; }
.modal-contentOk a {
text-decoration: none; }
@media (min-width: 992px) {
.modal-contentOk .modal-lg {
width: 414px; } }
.modal-contentOk .modal-header {
padding: 0;
border-bottom: 1px solid #e5e5e5; }
.modal-contentOk .modal-header p:nth-child(1) {
margin-top: 30px; }
.modal-contentOk .modal-header p:nth-child(2) {
margin-top: 25px;
margin-bottom: 46px;
font-size: 23px; }
.modal-contentOk .modal-footer {
padding: 15px;
text-align: center;
border-top: 1px solid #e5e5e5; }
.modal-contentOk .modal-footer button:nth-child(1) {
width: 64px;
height: 50px; }
.modal-contentOk .modal-footer button:nth-child(2) {
width: 158px;
height: 50px; }
.modal-contentOk .modal-footer button:nth-child(3) {
width: 64px;
height: 50px; }
.modal-contentBreserved {
border: 1px solid #cfcfcf;
width: 296px;
margin: auto auto;
height: 149px;
text-align: center;
line-height: 149px;
background-color: white; }
.modal-contentBreserved span:nth-child(1) {
display: inline-block;
width: 58px;
height: 58px;
border-radius: 50%;
background: #09b9b2;
font-size: 33px;
line-height: 58px;
text-align: center;
color: white;
font-weight: bold;
margin-right: 19px; }
.modal-contentBreserved span:nth-child(2) {
font-size: 23px;
font-weight: bold; }
a {
text-decoration: none; }
@media (min-width: 992px) {
.modal-lg {
width: 414px; } }
.modal-body {
position: relative;
padding: 0;
padding-top: 15px; }
</style>
你们有没有出现这样的错误呢！我提示大家，在写代码时一定写的代码写在正确的位置哟！
模态框遇到的那些事
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。