Modalboxen und Eigenschaften von Modalboxen im Bootstrap

高洛峰
Freigeben: 2017-02-20 11:16:15
Original
1705 Leute haben es durchsucht

Wenn Sie Modalboxen bei der Arbeit verwenden müssen, können Sie einen Blick auf

<p class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <p class="modal-dialog">
            <p class="modal-content">
                <p class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnCancel">
                        &times;                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        前台菜单管理                    </h4>
                </p>

                    <p class="modal-body">
                        <p>

                            <table width="100%" border="0" class="userCon_2">
                                <tr>
                                    <th width="30%">名称:</th>
                                    <td width="70%">
                                        <input type="text" name="Name" class="form-control" style="border-radius:3px; width:220px;" id="txtName" required="" aria-required="true">
                                    </td>
                                </tr>
                                <tr>
                                    <th>动作类型:</th>
                                    <td>
                                        <select class="selectpicker show-tick" id="txtType" style="height: 30px; width: 220px;" name="Type">
                                            <option value="view">view</option>
                                            <option value="click">click</option>
                                        </select>
                                    </td>
                                </tr>

                                <tr>
                                    <th>路径:</th>
                                    <td>
                                        <input type="text" name="Url" class="form-control" style="border-radius:3px; width:220px;" id="txtUrl" required="" aria-required="true" />
                                    </td>
                                </tr>
                                <tr>
                                    <th>排序:</th>
                                    <td>
                                        <input type="text" name="Rank" class="form-control" style="border-radius:3px; width:220px;" id="txtRank" />
                                        <input type="hidden" name="MainMenuGuid" value="" id="txtMainMenuGuid" />

                                    </td>
                                </tr>
                            </table>
                        </p>
                    </p>
                    <p class="modal-footer" style="border-top:none;">
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">关闭</button>
                        <button type="submit" class="btn btn-primary" id="btnSave">保存</button>
                    </p>


            </p><!-- /.modal-content -->
        </p><!-- /.modal -->
    </p>
Nach dem Login kopieren

Die Modalbox hat ein Attribut Sie können vermeiden, auf die Maskenebene zu klicken, um das Schließen des Modalfelds zu verursachen. Es ist der in p festgelegte data-backdrop="static". Dadurch kann verhindert werden, dass sich die Modalbox aufgrund plötzlicher Fehlbedienungen bei der Eingabe von Inhalten in die Modalbox schließt.

Es gibt auch ein weiteres Attribut: data-keyboard="false". Dadurch wird die ESC-Exit-Taste auf ungültig gesetzt. Dasselbe dient dazu, eine plötzliche Fehlbedienung zu vermeiden, die zum Schließen der Modalbox führt.

<p id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-newAdd" data-toggle="modal" data-target="#userModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增            </button>
            <button id="btn_edit" type="button" class="btn btn-newAdd">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>修改            </button>
            <button id="btn_delete" type="button" class="btn btn-newAdd">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除            </button>

</p>
Nach dem Login kopieren

Das Schaltflächenattribut data-toggle=" modal" data-target="#userModal" dient zum Öffnen der Modalbox.

Weitere Modalboxen und Eigenschaften von Modalboxen im Bootstrap finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage