Bootstrap Modal没有显示

时间:2013-11-12 11:15:25

标签: javascript jquery twitter-bootstrap modal-dialog

我尝试使用此代码点击图片时打开模态:

<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>

当我点击图片时,事情并没有出现。

2 个答案:

答案 0 :(得分:4)

你试过吗,$('#download').modal("show");

答案 1 :(得分:1)

显示或弹出模态的方法不止一种。

  • 您可以使用脚本或onclicks显示您的模态。

以下是示例:

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

现在在modal中给你的id与你在data-target中写的一样,这已经在你的代码中完成了第二次使用class =“popup”而不是你当前的类,

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

这种方法可以让您轻松获得额外的编码和时间。

  • 您还可以使用onclick属性
  • 显示或弹出模态

这是一个例子:

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

模态

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

脚本  这里只需通过id调用你的模态,使用.modal属性来显示或弹出。

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

我希望将来能帮助你和其他人。

提示:您也可以将数据目标和onclick同时用于一个模式。