2012-05-01 9 views
2

私のTwitterのブートストラップモーダルプラグイン使用して次のマークアップがあります。Twitterのブートストラップ:モーダルポップアップが消えない

<div class="tabbable"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a href="#tabPeople" data-toggle="tab">People</a></li> 
      <li><a href="#tabRoles" data-toggle="tab">Roles</a></li> 
     </ul> 
     <div class="tab-content"> 
      <div class="tab-pane active fade in" id="tabPeople"> 
       <a data-toggle="modal" href="#modalEditPerson1">Name</a> 
       <div class="modal hide fade in" id="modalEditPerson1"> 
        <div class="modal-header"> 
         <button class="close" data-dismiss="modal"> 
          ×</button> 
         <h3> 
          Name</h3> 
        </div> 
        <div class="modal-body"> 
         <p> 
          One fine body…</p> 
        </div> 
        <div class="modal-footer"> 
         <a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary"> 
          Save changes</a> 
        </div> 
       </div>     
      </div> 
      <div class="tab-pane fade" id="tabRoles"> 
       <p> 
        Role stuff here.</p> 
      </div> 
     </div> 
    </div> 

これはモーダルが表示されますが、このページのデモのようにそれをフェードしませんが:http://twitter.github.com/bootstrap/javascript.html#modals

UPDATE 私は、問題は、それはまた、私は上記のhtmlを更新した.fade を使用しています.tabbableのdiv内にネストされていることであることを実現しています。

答えて

11

おそらくtransitions.jsが最初に含まれる取得する必要がありますアニメーション

<script src="assets/js/bootstrap-transition.js"></script> 
<script src="assets/js/bootstrap-modal.js"></script> 

ためのJavaScriptを含めるのを忘れて!

+1

あなたは正しかったです。私はgithubからダウンロードしたので、プラグインは含まれていませんでしたが、今はそれを含めていますが、まだ消えません。 – hofnarwillie

+0

あなたのhtmlをtestetしてうまく動作します。あなたは正しいbootstrap-transition.jsをダウンロードしたのですか? – HaNdTriX

+0

このページ:http://twitter.github.com/bootstrap/download.htmlすべてのプラグインを選択し、下部にある巨大な青色のボタンをクリックします。 – hofnarwillie

-2

そもそもあなたのモーダルそのコメントtag.After体外ポップや私が

の下に行ったようbootstrap.cssにクラスモーダル-背景から表示プロパティを削除します。

modal-backdrop { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1040; 
 
    background-color: #000; 
 
    /*display:none;*/

now write some jquery as i have mentioned below: 

$("#Yourid").click(function() { 
 

 
    $('.modal-backdrop fade in').attr("display", "block"); 
 
});

+1

1. bodyタグの外側にHTMLコードを配置しないでください。 – hofnarwillie

+1

2.ソースブートストラップCSSファイルを変更しないでください。 – hofnarwillie

+1

3. JavaScriptは必要ありません。 – hofnarwillie