JQuery的引導模式對話框

我需要顯示使用引導模板報名形式模態窗口。JQuery的引導模式對話框

我的樣本應當通過按[R]元件被打開，但它不是。在本例中（http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php），但它的作用。

屬性似乎沒有在我的例子正確地工作：

data-toggle="modal"

爲什麼？

代碼： http://jsfiddle.net/Mfc7M/

<!DOCTYPE html> 
<title>Twitter Bootstrap Modals Example</title> 
<body> 
    <div id="reg-model-dialog" class="modal hide fade in" style="display: none; "> 
     <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> 
       <h3>Registration</h3> 
     </div> 
     <div class="modal-body"> 
      <table id="search-tbl"> 
       <tr> 
        <td>Email:</td> 
        <td> 
         <input type="text" name="reg-email" id="reg-email" /> 
        </td> 
       </tr> 
       <tr> 
        <td>Password:</td> 
        <td> 
         <input type="text" name="reg-pwd" id="reg-pwd" value="" /> 
        </td> 
       </tr> 
      </table> 
     </div> 
     <div class="modal-footer"> <a href="#" class="btn btn-success">Call to action</a> <a href="#" class="btn" data-dismiss="modal">Close</a> 
     </div> 
    </div> <a data-toggle="modal" href="#regstration" class="btn btn-primary btn-large" id="reg-dialog-btn">R</a>

和

$(document).ready(function() { 

    //$("#reg-model-dialog").modal(); 
    /* $('#reg-dialog-btn').click(function(){ 
               $('#reg-model-dialog').css('display','inline'); 
              }); */ 

});

來源

2013-04-07 J.Olufsen

如果你想有一個JS的解決方案：

$('#reg-dialog-btn').click(function() { 
    $('#reg-model-dialog').modal('show'); 
});

Fiddle

在這種情況下，#reg-dialog-btn的data-*屬性是不必要的。

Bootstrap Modal的show, hide和toggle方法記錄here。

我個人不喜歡把太多data-*屬性在HTML，因爲它混合結構的行爲，但設置data-target或href屬性"#reg-model-dialog"在@Pigueiras'解決方案將工作也沒關係。

來源

2013-04-07 21:25:11

的href屬性是錯誤的，你必須要參考的模態ID。在你的情況下，R鍵應該是：

<a data-toggle="modal" href="#reg-model-dialog" class="btn btn-primary btn-large" 
     id="reg-dialog-btn">R</a>

相反的：

<a data-toggle="modal" href="#regstration" ...></a>

你可以看一下它的工作在這裏：Jsfiddle

來源

2013-04-07 21:26:18 Pigueiras

JQuery的引導模式對話框

回答

相關問題