Reputation: 2432
I am using Twitter Bootstrap as a framework for designing a new social network that displays jobs and allows users to apply to the jobs with a simple one click process. When the user clicks "Apply" a modal window appears and gives them the option to select a resume then click "Apply." When the Apply button is clicked (opening the modal and closing the modal) I wish to have the modal fade in and out. I have all the bootstrap .js files downloaded and uploaded and I have all the CSS correct (i think), I just cannot get it to fade at all.
Here is the first apply button clicked:
<div class="float-right"><button id="apply-btn" class="btn-primary" data-toggle="modal" data-target="#apply" style="height: 40px;">Apply</button></div>
Here is the modal 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 -->
And here is the modal fade 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%;
}
I have researched this for quite some time now and cannot waste anymore time on it. I know I can use jQuery to animate the fade in and out but I'd like to stick with the bootstrap framework and use it as it is supposed to be.
Upvotes: 2
Views: 11331
Reputation: 2173
Ty, your code is a bit fine. You must remove some unnecessary div.
Remove
<div id="apply" class="hide">
and modify this one below:
<div class="modal fade in">
and the final product shall be:
<div id="apply" class="modal hide fade">
So that one should be your opening div that encloses the whole body of the modal.
I've revised your code and did it like so:
<div id="apply" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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>
I've tested the above code in my page, it loads fine. You may try it with yours. I also noticed that your form (modal-form) has no closing tag.
You don't have to add "in" as class. That one handles the slide down animation of the modal.
Have a nice day ahead...
Upvotes: 1