Bootstrap Modal not showing up

Question

Im trying to open a modal when an image is clicked with this code:

<a href="#" data-toggle="modal" data-target="#download"><img class="featurette-image pull-right" src="http://i.imgur.com/96C9Nij.png"></a>
<div class="modal fade" id="download" tabindex="-1" role="dialog" aria-labelledby="downloadlabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title" id="downloadlabel">Download & Install Pixelmon</h4>
    </div>
    <div class="modal-body">
    <p>
      <strong>Installing Pixelmon</strong><br /><br />
    First, you'll need to install Forge, so simply double-click "minecraftforge-installer-x.x.x-x.xx.x.xxx" and a menu will pop up for you to install forge. 
    </p>
    <p>
    Once you have done that its recommended you open the minecraft launcher, create a new profile, and select the forge version from the version dropdown.<br>After this launch minecraft and check if forge is running properly.
    </p>
    <p>
    Now that forge is installed, you only have to copy "Pixelmon x.x.x.zip" to your %appdata%\roaming\.minecraft\mods folder.
    </p>
    <p>
    You will need to use the previously created profile ( the forge profile ) to play with Pixelmon.
    </p>
    <p>
    Now that you have Pixelmon installed, you may beggin your adventure on play.pokemasters.org
    </p>
    </div>
    <div class="modal-footer">
      <a href="http://download1076.mediafire.com/2yznx31i1d6g/693cqta45ppv0la/ForgePixelmon2.5.2.zip" target="blank"><button type="button" class="btn btn-danger">Download Pixelmon</button></a>.
      <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
    </div>
  </div>
 </div>
</div>

The thing is its not appearing when I click the image.

Answer 1

There are more than one way to show or popup your modal.

• You can show your modal with out using script or onclicks.

Here is the Example:

<a href="#" data-toggle="modal" data-target="#download">

Now in modal give id same as you wrote in data-target which is already done in your code 2nd use class="popup" instead of your current class,

<div id="download" class="popup">Your modal items/elements </div>

this approach will ease you with extra coding and time.

• You can also show or popup your modal with the use of onclick property,

here is an Example:

<a href="#" onclick="showmodal()" data-toggle="modal" data-target="#download">

Modal

<div id="download" class="popup">Your modal items/elements </div>

Script here just call your modal by id with .modal property to show or popup.

 function showmodal()
{
$("#download").modal("show");
}

I hope it will help you and others in future.

Tip :You can use both data-target and onclick for one modal as well.

Answer 2

Have you tried, $('#download').modal("show"); ?