Jquery Modal 背景与模态框重叠

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 以及降低自动生成的背景的 z-index，但没有任何效果。

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

我错过了什么吗？

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

Answer 1

我不知道你想用你的模态做什么，但如果你删除 display: none，模态就会显示(所以 jsFiddle “喜欢”你的模态 ;)):

 /*display: none;*/

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

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

看看这个example with a button .