Question

On clicking a Button i want to show a Modal Window.

This is what i have implemented.

<a class="btn addIdeaBtn" data-toggle="modal" href="#addIdea" >Launch Modal</a> 
<!-- Model Window
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster -->
<div class="modal hide fade in" id="addIdea">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Add Idea</h3>
  </div>
  <div class="modal-body">
    <form action="" method="post">
      <textarea id="addIdeaPopUp" class="tinymce" name="" cols="" rows=""></textarea>
    </form>
  </div>
  <div class="modal-footer"> <a href="home.html" class="btn">Close</a> <a href="home.html" class="btn btn-primary">Add Idea</a> </div>
</div>

When i click the Button the modal window appears and then vanishes 😛

http://mink7.com/projects/cmrc/idea_exchange.html

The button is at the bottom of the screen to the left sticking as a footer.

Answer 1

Try removing the in class from your modal. The JS automatically toggles between hide and in. Since your button is set to toggle the modal, it disappears, because it believes it is visible.

Meaning: <div class="modal hide fade" id="addIdea">