私は 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を使用してフェードインとフェードアウトをアニメーション化できることは知っていますが、ブートストラップフレームワークに固執し、想定どおりに使用したいと思います。