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.

Solution

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

Comments

[Andres Ilich]

Do you have the bootstrap-transition.js script included in your setup?

[Andres Ilich]

Also, you have multiple containers for your modal. The main one should have all of the classes included, and they should be in this format: modal hide fade, the in class is automatically applied when the modal is called.

[Ty Bailey]

Yes all bootstrap js files are included. I'll re-arrange the containers and see if that helps. I will report back shortly.

[Andres Ilich]

To make sure, check that you are "only" including the bootstrap.js script pack file. If you include the plugin multiple times the scripts have been known to stop working.

[Ty Bailey]

Okay, so I added the modal classes to the div id="apply" and now nothing shows up when I click the Apply button... the backdrop turns dark as it is supposed to, but the modal does not appear. When i remove the 'hide' class the modal is displayed when i reload the page and fades out and I click cancel like it is supposed to...

[Andres Ilich]

Post your changes on a fiddle to take a look

[Ty Bailey]

here is the fiddle: it doesn't work in the fiddle though for some reason... jsfiddle.net/9qzzh

[Ty Bailey]

Okay, I was not able to get this to work at all. So I just removed the 'fade' class from the modal div and added a jquery fadeIn() function. This seems to be working as of right now, but it will not be accessible to people running no javascript.

[Andres Ilich]

When properly set, your code works fine, are you including the bootstrap stylesheet properly? jsfiddle.net/9qzzh/1

[Ty Bailey]

Yes, i re-arranged my code structure and everything works just fine. Thank you for your help.