js代码,控制显示隐藏:

<script>
        function ShowModal(eid) {
            $(".modal").show();
            $(".modal-content").show();
        }
        $(function () {
            // modal事件
            var $modal = $('.modal');
            $modal.on('click', function (ev) {
                var $this = $(this);
                $this.hide();
                $(".modal-content").hide();
            });
        });
    </script>

css代码:

.modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            padding-right: 0.733333rem;
            padding-left: 0.733333rem;
            display: none;
            background-color: #919191;
            z-index: 99;
            opacity: 0.5;
        }

        .modal-content {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 65rem;
            height: 50rem;
            padding: 0.706667rem 0.533333rem 0.666667rem;
            text-align: center;
            background-color: #cffaff;
            border-radius: 0.266667rem;
            resize: both;
        }

html代码:

<div class="modal"></div>
    <div class="modal-content" style="z-index: 99; display: none;">
        test
    </div>

 

posted on 2016-03-04 16:27  邢帅杰  阅读(201)  评论(0编辑  收藏  举报