Twitter引导模式不起作用

我是Twitter Bootstrap的新手。我正在模态面板上工作，但没有显示。它淡化了屏幕，但模态本身并未出现。我检查了错误控制台，并且没有错误。Twitter引导模式不起作用

我的代码位于<head>标记内;我包括像脚本：

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

来源

2013-12-09 baig

我有bootstrap.js和bootstrap.min.js通过bundleconfig添加到我的asp.net MVC项目，并见证它一切工作后删除bootstrap.min.js和只保留bootstrap.js – hiFI

您需要使用data-target标签。

尝试用data-target="#myModal"替换href="#myModal"属性。此外，你已经把hide类，我想它不应该在那里。

看看这个例子here

来源

2013-12-09 14:11:10

是的，它的工作。问题是因为'hide'class.thanks :) – baig

更改此：

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

要这样：

<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

（注，改变a标签button标签没有答案，但它是添加执行“工作”的data-target和data-toggle属性）

请看看下面这个例子：

<!DOCTYPE html > 

<html> 
<head> 
    <title>Bootstrap Modal</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  
    <!-- Bootstrap --> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css"> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" 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="purchaseLabel">Purchase</h4> 
       </div> 
       <div class="modal-body"> 
        sup? 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Purchase</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2013-12-09 14:14:43 sabotero

将'a'改为'button'什么也不做。诀窍在于设置'data-target'属性。你应该在你的答案中突出显示。 – Mrchief

@Mrchief完成！ ;） – sabotero

我有同样的问题，我意识到我有Bootstrap之后的jQuery库。

检查看到，在您的网页添加/链接第一jQuery和自引导，然后

来源

2015-12-06 21:26:30 s1gm9

是的，你是对的。 –

万一有人碰到这个问题，并没有以上的作品，我没有在类的CSS类褪色我的语气

我有我的语气像这样

<div class="modal" id="AdvanceSearchModal" tabindex="-1" role="dialog">

我添加了DIV褪色类的属性

<div class="modal fade" id="AdvanceSearchModal" tabindex="-1" role="dialog">

并与此模式再次打开

来源

2016-08-12 17:16:01 FFHanzel

Twitter引导模式不起作用

回答

相关问题