模态框遇到的那些事

　　　　在做项目时使用到了模态框，一不小心出了错误，大家来看看问题出现在那里吧！

　　　　　　

　　这里面有三个模态框，我就拿一个来举例吧！

　　开始我是这样写的【出错的代码】：

<!--暂停-->
        <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:

Html:



<div class="Y_containerTopRight">
    <ul>
        <li>
            <p style="height: 90px"><img src="../images/BrushProblem/BrushProblem_clock.png" alt="时钟" style="height: 74px; 74px;margin-top: 17px"/></p>
            <p style="height: 60px; 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：

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none; }

        .Y_containerTopRight {
            margin: 50px auto;
             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) {
             175px;
            height: 140px;
            border-bottom: 1px solid #989898; }
         .Y_containerTopRight ul li:nth-child(2) {
             175px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #989898; }
         .Y_containerTopRight ul li:nth-child(3) {
             175px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #989898; }
         .Y_containerTopRight ul li:nth-child(4) {
             175px;
            height: 40px;
            line-height: 40px; }
         .Y_containerTopRight ul a {
            color: #636864;
            text-decoration: none;
             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;
             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 {
             135px;
            height: 40px;
            color: #727473; }

        .modal-contentOk {
            border: 1px solid #cfcfcf;
             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- 992px) {
            .modal-contentOk .modal-lg {
                 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) {
             64px;
            height: 50px; }
        .modal-contentOk .modal-footer button:nth-child(2) {
             158px;
            height: 50px; }
        .modal-contentOk .modal-footer button:nth-child(3) {
             64px;
            height: 50px; }

        .modal-contentBreserved {
            border: 1px solid #cfcfcf;
             296px;
            margin: auto auto;
            height: 149px;
            text-align: center;
            line-height: 149px;
            background-color: white; }
        .modal-contentBreserved span:nth-child(1) {
            display: inline-block;
             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- 992px) {
            .modal-lg {
                 414px; } }
        .modal-body {
            position: relative;
            padding: 0;
            padding-top: 15px; }






    </style>

　　你们有没有出现这样的错误呢！我提示大家，在写代码时一定写的代码写在正确的位置哟！