2
我使用Twitter Bootstrap作爲設計新的社交網絡的框架，用於顯示作業並允許用戶通過簡單的單擊過程應用於作業。當用戶點擊「應用」時出現一個模式窗口，並給他們選擇一個簡歷的選項，然後點擊「應用」。點擊Apply按鈕（打開模式並關閉模式），我希望模式淡入淡出。我已經下載並上傳了所有的bootstrap .js文件，並且我擁有所有CSS（我認爲），我無法讓它完全消失。Twitter Bootstrap Modal Fade
這是第一個應用按鈕點擊：
<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框架並按照它的原樣使用它。
你有'bootstrap-transition.js'腳本包括在您的設置？ – 2012-07-30 19:53:17
另外，你有多個容器用於你的模態。主應該包含所有的類，它們應該採用這種格式：'modal hide fade'，當調用模式時'in'類會自動應用。 – 2012-07-30 19:54:33
是的，包括所有的bootstrap js文件。我會重新安排容器，看看是否有幫助。我會很快回復。 – 2012-07-30 19:55:25