首页 > 代码库 > 模态框遇到的那些事

模态框遇到的那些事

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

      技术分享

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

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

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

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>
style

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

 

   

模态框遇到的那些事