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>

我已经在我的页面中测试了上面的代码，它加载得很好。你可以试试看。我还注意到你的表单（模态表单）没有结束标记。

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

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

Twitter Bootstrap Modal Fade

1 个答案: