Twitter引导程序模式不起作用 [英] Twitter bootstrap modal not working

查看:90
本文介绍了Twitter引导程序模式不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是Twitter Bootstrap的新手.我正在使用模式面板,但未显示该面板.它使屏幕褪色,但是模态本身不会出现.我已经检查了错误控制台,没有任何错误.

I am new to Twitter Bootstrap. I am working on a modal panel, but it is not being displayed. It fades the screen, but the modal itself does not appear. I have checked the error console, and there are no errors.

我的代码在<head>标记内;我包括以下脚本:

My code is inside the <head> tag; I include the scripts like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $ruadmin ?>js/bootstrap.js"></script>
<script src="<?php echo $ruadmin ?>js/tablesorter/jquery.tablesorter.js"></script>
<script src="<?php echo $ruadmin ?>js/tablesorter/tables.js"></script>

模式页面:

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">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">Welcome</h3>
  </div>
  <div class="modal-body">
    <p> Hello </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>

推荐答案

您需要使用data-target标记.

尝试将href="#myModal"属性替换为data-target="#myModal". 此外,您已经放置了一个hide类,我想它不应该在那里.

Try to replace the href="#myModal" attribute with data-target="#myModal". Besides, you have put a hide class, I guess it shouldn't be there.

此处

这篇关于Twitter引导程序模式不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆