Bootstrap中过渡效果（Transition）模态框插件的使用案例

  通过使用模态框效果实现弹出框的登录效果： 

   效果图：

 

 <form id="formmodal" action="#">
        <h3>过渡效果（Transition）模态框插件的使用案例：</h3>
        <!--按钮触发模态框-->
        <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">
            登录<!--模态框-->
        </button>
         <!--data-backdrop="static/false"点击模态框外不会关闭默认为关闭-->
         <!--data-remote="name.htm"默认是false，如果为有效url的话会将页面嵌入到整个模态框 -->
         <!--data-keyboard="false"是指按键盘上的【esc】无效默认是true则关闭模态框-->
        <div class="modal fade" data-backdrop="static" data-remote="false" data-keyboard="false"
            data-show="show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModelLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            <!--模态框标题-->
                            登录
                        </h4>
                    </div>
                    <div class="modal-body" style="text-align: center;">
                        用户名：
                        <input type="text" id="txtUserName" /><br />
                        <br />
                        密&nbsp;&nbsp;码：<input type="text" id="txtPassword" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">
                            重置
                        </button>
                        <button type="button" class="btn btn-primary">
                            提交</button>
                    </div>
                </div>
            </div>
        </div>
        </form>

View Code