Modal Disappears Immediately

I’m using Bootstrap 2.0 and am trying to use a Modal for displaying a Markdown cheat sheet. I’ve set up a link to display the modal but when I click it, the modal appears briefly and then immediately disappears again.

Here’s my basic code:

<a class="btn" data-toggle="modal" data-target="#markdown">Show Markdown Cheatsheet</a>

<div id="markdown" class="modal hide fade">
    Foo
</div>

I’ve got the following JS files loaded:

• jquery 1.7.1
• bootstrap
• bootstrap-alert
• bootstrap-dropdown
• bootstrap-tabs
• bootstrap-modal
• bootstrap-transition
• jquery.dataTables.min

I have the following document-ready blocks:

$(document).ready(function(){
    $(".alert-message").alert();
    $(".dropdown-toggle").dropdown();

    $('#save').attr("disabled", "disabled");
    $('#comment_message').show();

    $('#comment').keyup(function() {
             inspectCommentTextField();
    });

    $('#minor_revision').change(function() {
         inspectMinorRevisionCheckBox();
    });

   });

$(document).ready(function(){
    computersTable = $('#computers').dataTable({
            "sScrollY": "200px",
        "bPaginate": false
    });

    applicationsTable = $('#applications').dataTable({
            "sScrollY": "200px",
        "bPaginate": false
        });

       $('form').submit(function() {
        // Clear filters because filtered checkboxes don't get submitted for some reason
        computersTable.fnFilter('');
        applicationsTable.fnFilter('');
        });
});

[hamiltop]

For anyone who wants to understand why including both breaks things it is because of the behavior of toggle(). With both files included, the callback function for click is bound twice and is therefore called twice. The first time it is called it shows the modal dialogue, and the second time it hides it. It does this so fast it looks like nothing happens.

I’ve seen people spend hours scratching their head over this and similar situations. Is there anyway to simulate the classic C #ifndef code in javascript? If each plugin were to register itself with jQuery or Bootstrap or something before it binds all callbacks, it would save a lot of people headaches. It could even print a message saying “duplicate plugins” or something so developers can be made aware of the problem.

Anything like that possible?

[hp82415]

Thanks @coreypurcell