Twitter Bootstrap Modal Fade

Question

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.

Answer 1

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">&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>

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...