Twitter bootstrap modal popup displayed for about a second, then dissappears

Question

I am using TB 2.0 on a signup page. I have added links at the bottom of the signup page, to allow users to refer to our terms etc.

This is a snippet of the markup I am using:

<div class="container">
    <!-- First 2 rows are modal elements -->
    <div class="row">
        <div class="span12">
            <div id="userAgreement" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userAgreementLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="userAgreementLabel">User Agreement</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo file_get_contents(url_for('@legal',true)); ?></p>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <div id="privacyPolicy" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="privacyPolicyLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="privacyPolicyLabel">Privacy Policy</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo file_get_contents(url_for('@privacy', true)); ?></p>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
    </div>

    <h3 align="center">Sign up to Foobar</h3>
    <br />

    <div class="row">
        <div class="span5 offset1 gray-1px-rh-border">

            <form class="form-horizontal" action="#" method="post">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputUsername">Username</label>
                    <div class="controls">
                        <input type="text" id="inputUsername" placeholder="Username">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <input type="password" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputConfirmPassword">Confirm Password</label>
                    <div class="controls">
                        <input type="password" id="inputConfirmPassword" placeholder="ConfirmPassword">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" id="chk-agree">Agree Terms*
                        </label>
                        <button type="submit" class="btn btn-success" id="signup-button">Get Access</button>
                    </div>
                </div>
            </form>

        </div>

        <div class="span4">
            <div class="container shift-right">
            </div>
        </div>
    </div>

    <br />

    <div class="row">
        <div class="span10 offset1">
            <div class="sign-up-agreement">
                <small>*By signing up, you are indicating that you have read, understood and agree to our 
                   <a id="lpl1" href="#userAgreement"  data-toggle="modal">user agreement</a> and 
                   <a id="lpl2" href="#privacyPolicy" data-toggle="modal">privacy policy</a>.
                </small>
            </div>
        </div>    
    </div>

</div>

The popup dialog is temporarily shown (for approx one second), before it disappears, it appears to be scrolling from bottom to up (I had to do this a few times, since it happens so quickly). The dialog appears to scroll from bottom to up, the last thing I see is the dialog box header with the title, and then it disappears, and the page remains darkened - until I click on the screen.

[[Edit]]

After further investigation using Firebug, I have narrowed down the problem to be something to do with javascript. I notice that the #display# style attribute applied to the element is (very briefly), set to block, and then very quickly (for some unknown reason), the #display# attribute is set to none - this then causes the dialog to disappear.

I manually set the display attribute to block in the firebug console, and the popup dialog appeared, and behaved as normal. So the question is this: what is causing the display attribute to be reset to 'none' after about 1 second?

[[Edit 2]]

When i replace the file_get_content() function call with simple text like 'hello world' and 'hello 2' for the two popups, they work as expected (i.e. correctly). So it is definitely something to do with the HTML text being returned in the get_file_content() function.

Any help appreciated.

Answer 1

In the end, I solved this by placing the content retrieved by file_get_contents() in an iframe. Don't know if that is there is a better way, but this is the only thing I found that works.

Answer 2

Sometimes this is caused by including jQuery more than once make sure this is not the case.

Also, you can manually change the position of the modal to ensure that it starts on the screen. You just need to alter the margins. Take a look at my tutorial: change twitter bootstrap position I hope this helps.