模态框遇到的那些事
在做项目时使用到了模态框,一不小心出了错误,大家来看看问题出现在那里吧!
这里面有三个模态框,我就拿一个来举例吧!
开始我是这样写的【出错的代码】:
<!--暂停--> <li data-toggle="modal" data-target="#myModal1"> <a href="#">暂停</a> <div class="modal fade" id="myModal1"> <!-- 窗口声明 --> <div class="modal-dialog modal-lg"> <!-- 内容声明 --> <div class="modal-content"> <p><img src="../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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
Html: <div class="Y_containerTopRight"> <ul> <li> <p style="height: 90px"><img src="../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="#">暂停</a> <div class="modal fade" id="myModal1"> <!-- 窗口声明 --> <div class="modal-dialog modal-lg"> <!-- 内容声明 --> <div class="modal-content"> <p><img src="../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="#" 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="../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="#" 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="../images/BrushProblem/right2.jpg" alt=""></span> <span>保存成功</span> </div> </div> </div> </li> </ul> </div>
style:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
你们有没有出现这样的错误呢!我提示大家,在写代码时一定写的代码写在正确的位置哟!