Twitter引导程序莫代尔淡黑色 [英] Twitter bootstrap modal fade black

问题描述

我使用的是twitter bootstrap模态，当我单击链接时，模态上仍然出现黑色褪色.

FYI- https://docs.google.com/file/d/0B7s0BYiHsMBtY1pLdmVsclpQXzA/edit?usp = sharing

这是我的代码:

<ul class="nav pull-right">
        <li><a href="#myModal" data-target="#myModal" data-toggle="modal">Signin</a></li>

    </ul>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

解决方案

我在此处找到了一个有效的示例:

JSFIDDLE

注意:要隐藏淡黑色时，只需从jquery中删除backdrop: true;.

HTML:

<div id="event-modal" class="modal hide fade">
    <div class="modal-header">
        <a class="close" href="#">x</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
        <p>Some information</p>
    </div>
    <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
    </div>
</div>
<a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">I'm attending!<span class="ico join"></span></a>

JQUERY:

$(function() {
    $('#event-modal').modal({
        backdrop: true
    });
});

CSS:

#event-modal {
    margin-top: 0;
}

I'm using twitter bootstrap modal,when I click the link,still black fade appears on the modal.

FYI - https://docs.google.com/file/d/0B7s0BYiHsMBtY1pLdmVsclpQXzA/edit?usp=sharing

Here is my code:

<ul class="nav pull-right">
        <li><a href="#myModal" data-target="#myModal" data-toggle="modal">Signin</a></li>

    </ul>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

解决方案

I found an working example here:

JSFIDDLE

NOTE: when you want to hide the fade black just remove backdrop: true; from the jquery.

HTML:

<div id="event-modal" class="modal hide fade">
    <div class="modal-header">
        <a class="close" href="#">x</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
        <p>Some information</p>
    </div>
    <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
    </div>
</div>
<a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">I'm attending!<span class="ico join"></span></a>

JQUERY:

$(function() {
    $('#event-modal').modal({
        backdrop: true
    });
});

CSS:

#event-modal {
    margin-top: 0;
}

这篇关于Twitter引导程序莫代尔淡黑色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！