Question

我想在html的几个区域显示弹出窗口：

enter image description here

第一个弹出窗口的

将覆盖第5，6,9,11

个方框

和第二个弹出窗口将覆盖第7,8,10,12号框

和当我调整浏览器大小时，它应该包含这些框：

为此，我创建了这个：请在jsfiddle中检查以下html。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
     .margin1 {
            padding-bottom: 5px;
            padding-left: 2.5px!important;
            padding-right: 2.5px!important;
        }

        .fixwidh {
            /*min-width: 295px;*/
        }

        .btnClass {
            width: 40%;
            height: 20%;
        }

        .topmargin {
            height: 10px;
            width: 100%;
        }

        .sidemargin {
            background-color: #e0e0e0;
        }

        .mainContent {
            width: 94%;
            background-color: red;
        }

        .verticaltextname1 {
            position: absolute;
            color: gray;
            -webkit-text-shadow: 1px 1px 3px rgba(150,150,150,1);
            text-shadow: 1px 1px 3px rgba(150,150,150,1);
            font-size: 20px;
            font-family: Raleway,Arial!important;
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
            top: 20px;
        }

        .topBox {
            min-height: 121px;
            margin-bottom: 10px;
            margin-right: -20px;
            background-color: grey;
        }

        .topBox2 {
            min-height: 121px;
            margin-bottom: 10px;
            margin-top: 20px;
            margin-right: -20px;
            background-color: #c2c2c2;
            box-shadow: 0px 0px 10px #000000;
            border-top: 1px solid #cbcbcb;
            border-left: 1px solid #f6f6f6;
            border-bottom: 1px solid #c5c5c5;
            border-right: 1px solid #cdcdcd;
        }

        .topBox3 {
            min-height: 64px;
            margin-bottom: 10px;
            margin-right: -20px;
            background-color: grey;
        }


        .pClass {
            color: #ffffff;
            -webkit-transform: rotate(-90deg);
            margin-top: 82px;
            min-width: 71px;
        }
    </style>
</head>
<body>
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-1 col-lg-1  col-sm-1 col-xs-1">
                    <div class="row">
                        <div class="pClass">Work History</div>
                        <div>
                            <span class="verticaltextname1">1</span>
                        </div>
                        <div>
                            <span class="verticaltextname1">2</span>
                        </div>

                        <div class="pClass">Projects</div>
                    </div>
                </div>
                <div class="col-md-10 col-lg-10  col-sm-10 col-xs-10">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="topBox2">1</div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="topBox2">2</div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="topBox2">3</div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="topBox2">4</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="topBox">5</div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="topBox">6</div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="topBox">7</div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="topBox">8</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="topBox3">
                                9
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="topBox3">
                                10
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="topBox">
                                11
                            </div>
                            <div><a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#basicModal">X</a></div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="topBox">
                                12
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-1 col-lg-1  col-sm-1 col-xs-1">
                    <div class="sidemargin">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1 col-lg-1  col-sm-1 col-xs-1">
                    <div class="sidemargin">
                    </div>
                </div>
                <div class="col-md-10 col-sm-10">
                    <div style="background-color: black; height: 100%; width: 102%; border: 1px solid red;">
                        Carousel Div
                    </div>
                </div>
                <div class="col-md-1 col-lg-1  col-sm-1 col-xs-1">
                    <div class="sidemargin">
                    </div>
                </div>
            </div>
            <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
                        </div>
                        <div class="modal-body">
                            <h3>Modal Body</h3>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Placed at the end of the document so the pages load faster -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
        </div>

</body>
</html>

如何在bootstrap版本3中制作响应模式弹出窗口？

0 个答案: