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>