bootstrap-modal doesn't show the dialog

Question

I'm using bootstrap in rails application. I tried to show dialog box using bootstrap-modal, but the dialog box doesn't come for me. Here is my view code.

<div id="creative_attachment_popup" class="modal hide fade" role="dialog">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>Do you eant to continue../p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

And simply, I call the js file as

 $('#creative_attachment_popup').modal('show');

the above code shows only a fade page and dosn't contain any dialog. When I type the above js line in my console it shows the following:

<div id=​"creative_attachment_popup" class=​"modal hide fade in ui-dialog-content ui-widget-content" role=​"dialog"> <h1 style=​"display:​ block;​" aria-hidden=​"false">​…​</div>​

Refer the above code with my html. Why am I getting this?

Answer 1

You have to include jQuery.js before, then bootstrap.js!!

And do not use simplified form of html for script. (like <script src=""/> ) you have to close it like <script src=""></script> )

<!-- JQuery -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<!-- BootStrap Link -->
<link rel="stylesheet" type="text/css" href="/linker/styles/vendor/bootstrap.css">
<script type="text/javascript" src="/linker/js/vendor/bootstrap.js"></script>

Have you called $('#creative_attachment_popup').modal('show'); after the document is ready?

$(function() {
    $('#creative_attachment_popup').modal('show');
});

Answer 2

Check the following:

• Did you include jQuery.js?
• Did you include bootstrap.js? (You must include jQuery before bootstrap)
• Did you include bootstrap.css?
• Go to Javascript Console of the browser (Firebug/Chrome Dev Tool), make sure there is not any errors.

I copied and pasted your code into a blank page and then added the following head:

<link href="bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap.js" type="text/javascript"></script>

Then I ran

$('#creative_attachment_popup').modal('show');

The medal popup with everything on it. So I guess you may not include everything (or include something wrong).