`
bjmike
  • 浏览: 285263 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Bootstrap弹出框modal

 
阅读更多
<section>  
<a data-toggle="modal" href="#regModal" class="btn btn-primary">show!</a>         
    <div class="row">  
        <form id="regModal" class="modal hide fade form-horizontal" method="post" action="http://localhost" style="display:none">  
            <div class="modal-header">  
                <h1>Header</h1>  
            </div>  
            <div class="modal-body">  
                <fieldset>  
                    <div class="control-group">  
                        <label class="control-label" for="username">Username:</label>  
                        <div class="controls">  
                            <input type="text" name="username">  
                        </div>  
                    </div>  
                    <div class="control-group">  
                        <label class="control-label" for="password">Password:</label>  
                        <div class="controls">  
                            <input type="password" name="password">  
                        </div>  
                    </div>  
                </fieldset>  
            </div>  
            <div class="modal-footer">  
                <input  type="submit" class="btn btn-primary" value="Submit!">  
                <input type="button" class="btn" value="Close!" data-dismiss="modal">  
            </div>  
        </form>  
    </div>  
</section>


也可通过 $(“#regModal”).modal()来打开

参考网站:http://friskit.me/2012/03/bootstrap-modal/
http://wrongwaycn.github.io/bootstrap/docs/javascript.html#modals
分享到:
评论

相关推荐

    Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法

    在使用Bootstrap框架构建网页时,有时会遇到一个常见的问题,那就是Bootstrap弹出框(modal)中的输入框(input)无法获得焦点。这个问题通常发生在尝试在已存在的modal之上再弹出一个新的modal层时,由于Bootstrap...

    BootStrap中的模态框(modal,弹出层)功能示例代码

    在Bootstrap框架中,模态框(Modal)是一种非常实用的组件,它允许用户在当前页面上弹出一个对话框,而无需离开当前上下文。模态框提供了丰富的交互性和自定义选项,使得开发者能够轻松创建各种类型的弹出窗口,如...

    Bootstrap弹出框

    Bootstrap弹出框的HTML结构通常包括一个`&lt;div&gt;`元素,其class属性设置为`.modal`,代表整个弹出框容器。在这个容器内,有两个主要的子元素:`.modal-dialog`和`.modal-content`。`.modal-dialog`定义了弹出框的大小...

    js,bootstrap 城市弹出框

    1. **Bootstrap弹出框(Modal)**: Bootstrap的模态对话框(Modal)是其核心组件之一,常用于显示额外的内容或执行特定操作,如登录、注册、查看详情等。城市弹出框就是利用这一功能,创建一个可弹出的窗口,展示一...

    jQuery+Bootstrap美化弹出框

    4. 使用jQuery监听触发器元素的事件,例如`click`,在事件回调中调用Bootstrap的`.modal('show')`或`.modal('hide')`方法来显示或关闭弹出框。 5. 可以进一步通过jQuery修改弹出框的内容、样式,或者添加交互逻辑,...

    整理关于Bootstrap模态弹出框的慕课笔记

    《深入理解Bootstrap模态弹出框》 Bootstrap模态弹出框是网页设计中常见的一种交互元素,它允许用户在不离开当前页面的情况下查看或处理额外的信息或执行操作。Bootstrap框架通过简洁的HTML、CSS和JavaScript实现了...

    Bootstrap点击弹出层用户登录窗口模板

    在登录窗口模板中,我们可以期待看到一些关键的Bootstrap组件,如模态(Modal)——这是一个可以弹出的对话框,用于显示额外的信息或进行特定操作,比如用户登录。 模态通常由HTML元素、JavaScript事件处理和必要的...

    JS组件Bootstrap实现弹出框和提示框效果代码

    本篇主要介绍如何利用Bootstrap实现弹出框(Modal)和提示框(Tooltips & Popovers)。 首先,Bootstrap中的弹出框(Modal)是一个浮动于主内容上方的全屏窗口,常用于表单填写、信息确认或显示详细内容等场景。...

    Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

    废话少说,切入正题,Bootstrap弹出框垂直居中的问题,因为我拿到的弹出框样式并非垂直居中,而是top 10%,但页面长了,就显得特别恶心。 解决方案如下所示: 1.在css里,找到 .modal.fade.in { top: 10%; } 这...

    ModalLayer模态框插件js弹出框

    **ModalLayer模态框插件js弹出框详解** 在网页设计和开发中,模态框(Modal Layer)是一种常用的设计元素,它用于在当前页面上弹出一个半透明的覆盖层,显示额外的信息或者进行交互操作,而不会中断用户与主页面的...

    简介BootStrap model弹出框的使用

    Bootstrap Model弹出框是Bootstrap框架中的一个重要组件,用于创建模态对话框,即在当前页面上弹出一个浮动窗口,用户可以在不离开当前页面的情况下查看或操作内容。它提供了丰富的功能,包括自定义内容、控制行为...

    bootstrap模态框弹出效果.zip

    其中,模态框组件(Modal component)是Bootstrap框架的一部分,它允许开发者通过简单的HTML和JavaScript实现弹出窗口的功能。 模态框的基础结构包括三部分:模态对话框(`.modal`),模态内容(`.modal-content`)...

    Bootstrap 模态框(Modal)带参数传值实例

    模态框(Modal)是覆盖在父窗体上的子窗体。...以上所述是小编给大家介绍的Bootstrap 模态框(Modal)带参数传值实例,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的

    Jquery 弹出框

    - 如果项目使用了Bootstrap框架,可以利用其内置的Modal组件创建弹出框。Bootstrap Modal提供了丰富的配置选项和预设样式。 - 示例HTML结构: ```html ...

    简单的 bootstrap 多选弹出层插件

    ### Bootstrap弹出层(Modal)介绍 Bootstrap的弹出层组件(Modal)是一种非常实用的交互元素,它可以用来显示重要的信息、表单、或者如本例中的多选功能。Modal通过JavaScript插件实现,具有关闭按钮、键盘导航和...

    asp.net 弹出框组件

    首先,ASP.NET弹出框可以是自定义的HTML和JavaScript实现,或者使用现成的库如jQuery UI的Dialog,Bootstrap的Modal,或者是ASP.NET AJAX Control Toolkit中的PopupControlExtender等。这些方法都能实现弹出窗口的...

    bootstrap modal弹出框的垂直居中

    本人前端菜鸟,公司项目尝试采用bootstrap,我身先士卒为同事趟“坑”,无奈UI妹子刁难非得让modal弹出框垂直居中,为了前端开发岗位的荣誉,花时间满足之。 最先就是百度咯,方法,就是修改源码 that.$element....

Global site tag (gtag.js) - Google Analytics