0

These are all my linked Javascript files:

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="bootstrap/docs/assets/js/jquery.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-transition.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-button.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap-affix.js"></script>
    <script src="bootstrap/docs/assets/js/bootstrap.min.js"></script>
    <script src="bootstrap/docs/assets/js/holder/holder.js"></script>
    <script src="bootstrap/docs/assets/js/google-code-prettify/prettify.js"></script>
    <script src="bootstrap/assets/js/application.js"></script>

These are all my linked CSS files:

<link href="css/bootstrap.min.css" rel="stylesheet" media="all" /> 
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link href="css/style.css" rel="stylesheet" media="all" />

And here is my Model:

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

The problem that I am having is that when I click on the button to launch the Model it only pops up on my screen for 1 second then it disappears. For some reason it's not staying on the screen.

zessx
  • 68,042
  • 28
  • 135
  • 158
Lucas Santos
  • 1,359
  • 3
  • 24
  • 43
  • And by the way I purposly did not add the modal.js because I already have the bootstrap.js and I believe you can only add 1 of them from what I read in order for the model to work. – Lucas Santos Sep 12 '13 at 08:34
  • `bootstrap.js` contains all the `bootstrap*.js` files you included and `bootstrap.min.css` is just a compressed version of `bootstrap.css` – suhailvs Sep 12 '13 at 08:38
  • regaurdless if those files are attached or not it doesn't fix the problem. I dont know why but the model only stays on the screen for 1 second then it disappear. – Lucas Santos Sep 12 '13 at 08:48

2 Answers2

1

hey it is working fine for me. Jsfiddle demo

more over you only need to add any one of bootstrap.css or bootstrap.min.css.

actually bootstrap.min.css is just a compressed version of bootstrap.css.

you don't need to add all javascript files.

a basic example:

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" media="all" /> 

<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

to test it, just copy the above code into a text-editor and save it as **.html, then just open it on some browser

Community
  • 1
  • 1
suhailvs
  • 20,182
  • 14
  • 100
  • 98
  • I do have jquery.js already linked as you can see. If I add the model.js and I click Launch Model, the model will appear only for 1 second and go away but the black background that pops up stays. So the model information and white boxes and what not disappears and the black background is still there. – Lucas Santos Sep 12 '13 at 08:45
  • @LucasSantos do you checked the [fiddle demo](http://jsfiddle.net/suhailvs/gjqac/1/) or did you checked the above code, ie just copy the above code into a text-editor and save it as **.html, then just open it on some browser. when i checked both ways are worked fine.. please note that `bootstrap.js` contains all the `bootstrap*.js` files. – suhailvs Sep 12 '13 at 08:48
0

I found out my problem. I needed to delete 

<script src="bootstrap/docs/assets/js/bootstrap.min.js"></script>

Guess you can't include the bootstrap.min.js

Lucas Santos
  • 1,359
  • 3
  • 24
  • 43
  • `bootstrap.min.js` is just a compressed version of `bootstrap.js`. ie spaces are deleted and it is a single line txt file. – suhailvs Sep 12 '13 at 09:12