Question

我需要使用Bootstrap模板在模态窗口中显示注册表单。

我的样本应该按[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');
                                             }); */

});

Answer 1

如果你想要一个JS解决方案：

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

Fiddle

在这种情况下，#reg-dialog-btn的{{1}}属性是不必要的。

Bootstrap Modal的data-*，show和hide方法记录在案here。

我个人不喜欢在HTML中添加太多toggle个属性，因为它将结构与行为混合在一起，但将data-*或data-target属性设置为href，如@Pigueiras '解决方案也可以正常工作。

Answer 2

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

不显示JQuery引导模式对话框

2 个答案: