2

我正在使用 Twitter 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 为淡入和淡出设置动画，但我想坚持使用引导框架并按预期使用它。

4

1 回答 1

1

泰，你的代码有点好。您必须删除一些不必要的 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”添加为类。那个处理模态的向下滑动动画。

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

于 2012-08-06T15:29:27.900 回答