Question

当用户提交表单时，我有一个我昏暗的页面。当在页面上激活暗淡元素时，也会激活模态。我的问题是模态也变暗了。我尝试使用z-index使.dimmer div的模态ontop会阻止dimmwr属性影响模态。

# HTML
<div class="dimmer">
</div>
<div class="modal fade" id="after_submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

# CSS
.dimmer {
  display: none;
  background: #000;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

#after_submit {
  position: fixed;
  z-index: 999;
}

# JS
$(function() {
    $('#wizard_submit').validate();
    $('#wizard_submit').submit(function(event) {
        var isvalidate = $("#wizard_submit").valid();
        if (isvalidate) {
            $('.dimmer').show();
            $('#after_submit').modal('show');
        }
    });
});

不透明度为0.5的＃000的背景也适用于after_submit元素。我希望防止这种情况发生。

Answer 1

将display: none提供给您的＆＃34;＃after_submit＆＃34;模态，因此它也像调光器类一样隐藏在视野之外。现在基本上你想将click元素绑定到一个按钮，在你的情况下是提交按钮，当你执行验证时，将show函数添加到脚本中。

以下是示例 FIDDLE

代码段如下..

＆＃13;

$(document).ready(function() {
  $('#clickMe').click(function() {
    $('.dimmer').show();
    $('#after_submit').show();
  });
});

＆＃13;

.dimmer {
  display: none;
  background: #000;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
#after_submit {
  display: none;
  position: fixed;
  height: 200px;
  width: 200px;
  background: #fff;
  top: 50%;
  left: 50%;
  margin: -100px -100px;
  z-index: 999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="clickMe">Click Me</button>
<div class="dimmer"></div>
<div id="after_submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <p>modal stuff goes here</p>
</div>

＆＃13;

希望这会有所帮助。 快乐编码：）

昏暗的网页与模式在上面

1 个答案: