Question

我正在为我的一些表单创建一个自定义模式警报框，它们似乎工作正常，除了模态背景似乎与我的模态框重叠...这是一个问题，因为你不能点击它或者看得很清楚。

我在这里创建了一个jsFiddle http://jsfiddle.net/JBUqf/2/但似乎jsfiddel不喜欢模态函数。

实际上有效的jsFiddle！谢谢@Ali http://jsfiddle.net/NUCgp/208/

我的HTML看起来像这样

 <div class="modal_window" id="authorCover">
   <div class="modal_heading"><h2>Modal Heading</h2></div>
   <div class="modal_content">
     <p>This is the Modal Content Area.</p>
   </div>
   <div class="modal_footer">
      <button class="modal_close" href="#authorCover">Close</button>
   </div>
 </div>

<button class="btn btn-small btn-danger pull-right modalCall" href="#authorCover">Submit</button>

我的css看起来像这样

.modal_window{
    display: none;
    background:#fff;
    left:50%;
    margin:-200px 0 0 -40%;
    position:fixed;
    top:50%;
    width:80%;
      -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    box-shadow:0 3px 7px rgba(0,0,0,.25);
    -moz-box-shadow:0 3px 7px rgba(0,0,0,.25);
    -webkit-box-shadow:0 3px 7px rgba(0,0,0,.25);
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    z-index: 5000;
    padding: 0;
}


.modal_heading{
    background:#F7F7F7;
    border-bottom: 1px solid #e7e7e7;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    padding: 10px;
}
.modal_heading h2{
    margin: 0px;
}
.modal_content{
    padding: 10px;
}

.modal_footer{
    background:#F7F7F7;
    border-top: 1px solid #e7e7e7;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    padding: 10px;
}

我的jQuery看起来像这样

$('.modalCall').on('click', function(){
  $(this).closest('.form-group').find('.modal_window').modal();
  return false;
});

我尝试在模态框上增加z-index，并尝试在自动生成的背景上降低它，但它没有任何效果。

我还尝试在其上放置一个绝对位置，这只会弄乱已经放在盒子上的样式。

我错过了什么吗？

编辑：我不是在寻找hide（）show（）解决方案。我正在尝试使用特定的modal（）函数。

Answer 1

我不知道你想对你的模态做什么，但是如果你删除display: none，会显示模态（所以jsFiddle“喜欢”你的模态;））：

 /*display: none;*/

http://jsfiddle.net/JBUqf/3/

如果你想使用模态函数，你应该看jqueryui dialog。

看看这个example with a button。

Answer 2

没有bootstrap：你可以简单地使用jQuery show并隐藏这样的函数：

$('.modalCall').on('click', function(){
    $('#authorCover').show();
});
$('.modal_close').on('click',function(){
  $('#authorCover').hide();
});

（CFR）。 http://jsfiddle.net/JBUqf/6/

要添加叠加层，您只需使用以下css：

.overlay{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.7);
    display:none;
}

简单地显示或隐藏这个，并且繁荣......在这里你有你的模态叠加。

<强>自举：使用bootstrap时，请确保模态窗口的z-index高于叠加层。我检查了叠加层有z-index:1030;。因此，模式至少需要z-index:1031;，才能位于叠加层之上。您可以使用浏览器开发工具轻松检查这一点。

（CFR）。 http://jsfiddle.net/NUCgp/209/

Answer 3

这是你想要实现的吗？ http://jsfiddle.net/JBUqf/8/如果您未设置固定margin，则不应使用百分比dimensions。

Answer 4

好的：你走了：

小提琴：http://jsfiddle.net/NUCgp/210/

.modal_window{
   z-index: 2000;
 }

Jquery模态背景重叠模态框

4 个答案: