1

我需要使用 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');
                                             }); */

});
4

2 回答 2

2

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

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

小提琴

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

Bootstrap 模态的show,hide和toggle方法在此处记录。

I personally dislike putting too many data-* attributes in the HTML as it mixes structure with behavior, but setting a data-target or href attribute to "#reg-model-dialog" as in @Pigueiras' solution will work fine too.

于 2013-04-07T21:25:11.580 回答
1

The href attribute is wrong, you have to make reference to the modal ID. In your case, the R button should be: 

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

Instead of: 

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

You can look at it working here: Jsfiddle

于 2013-04-07T21:26:18.387 回答