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

bootstrap模态框弹出位置设置

阅读更多
<div class="modal fade modal_position" id="myModal" tabindex="-1" style="min-width:275px;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content skill-group-content">
            <button type="button" class="close skill_group_close" aria-label="Close"
data-dismiss="modal" aria-hidden="true">
                &times;
</button>
            <div class="modal-body">
                <div class="modal-body-type">
                    <label class="webchat" for='webchat_topeer'>选择技能组</label>
                    <select class="webchat" id='webchat_topeer'></select>
                </div>
                <div class="modal-body-type">
                    <label class="webchat" for='type_name'>类型名称</label>
                    <input class="webchat" type='text' id='type_name' required>
                </div>
                <div class="modal-body-type">
                    <label>启用咨询类型</label>
     <input id="webchat_showTypeName" style="width:20px; height:20px;" type="checkbox" value="true" name="webchat_showTypeName" checked="checked">
                </div>

                <button type="button" class="btn-small btn-position ds_do_action" ds_action="config.channel.addSkillGroup">
                    确定
</button>
            </div>

        </div><!-- /.modal-content -->
</div>
</div>
<script>
$('#myModal').modal().css({
     'margin-top': function () {
         return ($(this).height() * 1.5);
     }
 });
</script>
使用jquery通过在css样式中设置margin-top的值得大小可以改变距离顶端的距离。也可以在style中修改
div.modal.fade.in{top:10%;}修改为任意的大小
分享到:
评论

相关推荐

    bootstrap模态框弹出效果.zip

    这个"bootstrap模态框弹出效果.zip"文件包含15种不同的模态框弹出效果,对于开发者来说是一个很好的资源库,可以用来提升网站的用户体验。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具集,特别注重易用...

    15种bootstrap模态框动画弹出特效.rar

    本资源"15种bootstrap模态框动画弹出特效.rar"提供了15种不同的模态框弹出动画效果,旨在为开发者提供更加丰富的用户体验设计。 首先,我们来了解一下Bootstrap模态框的基本结构。一个Bootstrap模态框由三部分组成...

    15种bootstrap模态框动画弹出特效

    在描述中提到的“15种动画弹出特效”,意味着这个压缩包可能包含了15个不同的CSS或JavaScript代码片段,用于实现模态框弹出时的各种动画效果。这些动画可能包括淡入淡出、滑动、旋转、缩放等多种视觉效果,旨在吸引...

    Bootstrap响应式模态登录框插件

    在本插件中,模态框被用作登录表单的容器,当用户触发特定事件(如点击某个按钮)时,模态框会以弹出窗口的形式出现在页面中央。 jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和Ajax...

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

    总结起来,Bootstrap模态框提供了一种简洁且可定制的方式,用于在网页中实现弹出对话框。通过理解并掌握其基本结构和属性,开发者可以轻松地将模态框集成到自己的项目中,提升用户体验,同时保持代码的整洁和高效。

    模态框-提示框-Bootstrap

    Bootstrap模态框(Modal)是Web开发中一种常见的交互元素,它用于在当前页面上弹出一个浮动窗口,展示额外的信息或执行特定操作,而无需离开当前页面。模态框通常用于确认操作、显示详细信息或者提供表单输入等场景...

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

    Bootstrap模态框提供了多种与模态显示和隐藏相关的事件,如`show.bs.modal`、`shown.bs.modal`、`hide.bs.modal`、`hidden.bs.modal`,可以监听这些事件来执行相应的操作。 总结,Bootstrap模态弹出框是一个功能...

    bootstrap模态框弹出效果

    本资源“bootstrap模态框弹出效果”提供了15种不同的模态框弹出动画,这将极大地丰富你的网站或应用的用户体验。以下是对这些模态框效果的详细解析: 1. **基本模态框**:这是最基础的模态框实现,通过点击按钮触发...

    BootStrap 模态框实现刷新网页并关闭功能

    Bootstrap模态框(Modal)是前端开发中常用的一种交互组件,它允许在当前页面上弹出一个浮动的对话框,而无需跳转到新的页面。在Bootstrap框架中,模态框提供了一种优雅的方式来呈现内容,同时保持了用户体验的一致...

    简易仿bootstrap模态框多步骤特效.zip

    首先,Bootstrap模态框是Bootstrap框架中的一个组件,通过简单的HTML、CSS和JavaScript代码,可以方便地创建弹出窗口。模态框通常由一个触发器(如按钮)和一个显示内容的弹出层组成。在Bootstrap中,模态框的HTML...

    iframe 内的bootstrap模态框证照父页面

    Bootstrap模态框(Modal)是Bootstrap框架中一个强大的组件,它允许我们在页面上弹出一个对话框或窗口,提供额外的信息或功能。默认情况下,模态框会添加一个全屏的背景层(通常称为"modal-backdrop"),用于遮罩并...

    bootstrap模态框弹出和隐藏,动态改变中间内容的实例

    在介绍Bootstrap模态框弹出和隐藏,以及如何动态改变其中内容的实例之前,我们需要了解几个关键点: 1. 引入Bootstrap文件:为了使用Bootstrap的模态框组件,首先需要引入Bootstrap的CSS和JS文件。在示例中,通过`...

    bootstrap模态窗口美化特效

    模态(Modal)是Bootstrap框架中的一个关键组件,它通过弹出一个浮动的对话框来显示内容,而不会中断用户对页面的主流程。 在这个美化特效中,开发者利用自定义的CSS样式对模态窗口进行了深度定制。CSS(层叠样式表...

    bootstrap 模态框(modal)实现水平垂直居中显示

    Bootstrap模态框(Modal)是该框架中一个非常重要的组件,它用于创建弹出式的对话框,常用于显示额外信息、表单输入或用户交互。然而,默认情况下,模态框在页面上的位置并不是水平垂直居中的,而是固定在距离顶部30...

    Bootstrap 模态框多次显示后台提交多次BUG的解决方法

    我们在使用 Bootstrap 模态框时,点击按钮弹出模态框,然后填写对应的信息,然后使用 Ajax 提交表单信息到后台。这种情况下,如果我们多次点击模态框,每次点击都会触发一次提交事件,从而导致多次 alert("提交")。 ...

    bootstrap模态框实现拖拽效果

    Bootstrap模态框(Modal)是一种常见的网页交互元素,它允许用户在不离开当前页面的情况下查看或操作额外的信息。在某些情况下,特别是在复杂布局中,模态框可能会被其他元素遮挡,这时就需要实现模态框的拖拽功能,...

    Maven 基于SSM框架的增删改(使用了bootstrap的模态框,分页插件pagehelper, ajax等,附sql文件)

    通过这些组件的结合,项目能够实现动态的用户交互,如使用Ajax进行后台数据的无刷新更新,通过Bootstrap模态框进行表单的弹窗编辑,以及PageHelper的高效分页显示。整体而言,这是一个典型的Java Web应用实例,展示...

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

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

Global site tag (gtag.js) - Google Analytics