javascript - Twitter Bootstrap 模态淡入淡出

Question

我正在使用 Twitter Bootstrap 作为框架来设计一个新的社交网络，该网络显示工作并允许用户通过简单的单击过程申请工作。当用户点击“应用”时，会出现一个模态窗口，让他们可以选择一份简历，然后点击“应用”。单击“应用”按钮(打开模态并关闭模态)时，我希望模态淡入淡出。我下载并上传了所有 bootstrap .js 文件，并且所有 CSS 都正确(我认为)，但我根本无法让它消失。

这是点击的第一个应用按钮:

<div class="float-right"><button id="apply-btn" class="btn-primary" data-toggle="modal" data-target="#apply" style="height: 40px;">Apply</button></div>

这是模态 html:

<div id="apply" class="hide">
        <div class="modal fade in">
            <form class="modal-form" action="#thank-you" method="post" style="margin-bottom: 60px;">
                <div class="modal-header"><h2>Apply</h2></div>

                <div class="modal-body"> 

                    <img class="apply_img" src="images/temp/prof_pic_temp.jpg" style="display: inline;">
                    <div class="apply_info">
                        <span class="apply_name">Tyler Bailey</span>
                        <ul>
                            <li><a href="schools.php">Western Michigan University</a></li>
                            <li><a href="#">Film, Video & Media Studies</a></li>
                        </ul>
                        <form id="doc_select" method="get">
                            <select name="doc_select" style="margin-bottom: 0px;">
                                <option select="selected">Select a resume</option>
                                <option value="1">Resume 1</option>
                                <option value="2">Resume 2</option>
                                <option value="3">Resume 3</option>
                            </select>

                            <div class="control-group" style="margin-top: 25px;">
                                <label class="control-label" for="user_resume" style="font-weight: bold; margin-bottom: 0px;">Or upload new resume:</label>
                                <div class="control">
                                    <input type="file" id="user_resume" size="30" />
                                </div>
                            </div>
                        </form>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Apply</button>
                </div>
        </div>
    </div><!-- #apply -->

这是模式淡入淡出的 CSS:

    .modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  max-height: 800px;
  overflow: auto;
  width: 560px;
  margin: -200px 0 0 -280px;
  background-color: #ffffff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  /* IE6-7 */

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.modal.fade {
  -webkit-transition: opacity .3s linear, top .3s ease-out;
  -moz-transition: opacity .3s linear, top .3s ease-out;
  -ms-transition: opacity .3s linear, top .3s ease-out;
  -o-transition: opacity .3s linear, top .3s ease-out;
  transition: opacity .3s linear, top .3s ease-out;
}
.modal.fade.in {
  top: 50%;
}

我已经研究了很长时间了，不能再浪费时间了。我知道我可以使用 jQuery 为淡入淡出设置动画，但我想坚持使用 Bootstrap 框架并按预期使用它。

Answer 1

Ty，您的代码还不错。您必须删除一些不必要的 div。

删除

<div id="apply" class="hide">

并在下面修改这个:

<div class="modal fade in">

最终产品应该是:

<div id="apply" class="modal hide fade">

所以那个应该是你的开始 div，它包围了整个模态。

我已经修改了你的代码并且是这样做的:

   <div id="apply" class="modal hide fade">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h2>Apply</h2>
        </div>

        <div class="modal-body"> 
            <form class="modal-form" action="#thank-you" method="post" style="margin-bottom: 60px;">

            </form>
            <img class="apply_img" src="images/temp/prof_pic_temp.jpg" style="display: inline;">
            <div class="apply_info">
                <span class="apply_name">Tyler Bailey</span>
                <ul>
                    <li><a href="schools.php">Western Michigan University</a></li>
                    <li><a href="#">Film, Video & Media Studies</a></li>
                </ul>
                <form id="doc_select" method="get">
                    <select name="doc_select" style="margin-bottom: 0px;">
                        <option select="selected">Select a resume</option>
                        <option value="1">Resume 1</option>
                        <option value="2">Resume 2</option>
                        <option value="3">Resume 3</option>
                    </select>

                    <div class="control-group" style="margin-top: 25px;">
                        <label class="control-label" for="user_resume" style="font-weight: bold; margin-bottom: 0px;">Or upload new resume:</label>
                        <div class="control">
                            <input type="file" id="user_resume" size="30" />
                        </div>
                    </div>
                </form>
            </div>

        </div>

        <div class="modal-footer">
            <button type="submit" class="btn" data-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Apply</button>
        </div>
    </div>

我已经在我的页面中测试了上面的代码，它加载正常。你可以试试你的。我还注意到您的表单 (modal-form) 没有结束标记。

您不必将“in”添加为类。那一个处理模式的向下滑动动画。

祝你有美好的一天......