`

bootstrap模态框简单设计

阅读更多

模态框

      模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭,还有固定时间自动消失等,可根据需要自行设计。

      使用模态框需先在index.haml(针对rubymine开发工具)下引入下列两个js(注意先后顺序):

%script(lang="javascript" src="lib/js/jquery/jquery-1.8.2.min.js")
    %script(lang="javascript" src="lib/js/angular/bootstrap.js")

 

 

      haml代码:

 

.modal.fade#myModalname
  .modal-dialog
    .modal-content
      .modal-header
        %button.close(aria-hidden = "true"  data-dismiss = "modal" type = "button") ×
        %h4.modal-title
      .modal-body
        %center
          可编辑内容
      .modal-footer

 

 

       对应html代码:

 

 

<div class="modal fade ng-scope" id="myModalname">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <center>
         可编辑内容
        </center>
      </div>
    </div>
  </div>
</div>

      js方法 :

 

$timeout(function () {
            $('#ModalFalse').modal('show');
            $timeout(function () {
                $('#ModalFalse').modal('hide');
            }, 3000)
        }, 1)

     #myModalname页面的一个id,用于页面数据绑定显示;

   加入$timeout实现页面模态框按设定时间自动关闭,3000代表3秒,单位为毫秒

 

      同时在js主方法加入$timeout

   

function BidResultController($scope, $navigate, $timeout) {
       方法体;
}

  

 

 


      简单效果图:

 

  • 大小: 61.5 KB
分享到:
评论

相关推荐

    bootstrap模态框弹出效果.zip

    Bootstrap模态框(Modal)是Web开发中常用的一种交互元素,尤其在响应式设计中扮演着重要角色。它提供了一种优雅的方式,用于在当前页面上显示临时信息或与用户进行交互,而无需离开当前视图。这个"bootstrap模态框...

    模态框-提示框-Bootstrap

    9. **响应式设计**:Bootstrap模态框具有内置的响应式特性,可以根据屏幕尺寸自动调整布局,确保在不同设备上都能良好显示。 在实际应用中,开发者可以利用Bootstrap模态框提供的API和插件功能,实现更复杂的交互,...

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

    "简易仿bootstrap模态框多步骤特效.zip"这个压缩包很可能包含了一个简单的实现,模仿了Bootstrap模态框功能,并且加入了多步骤流程的效果。以下是对这个主题的详细讲解: 首先,Bootstrap模态框是Bootstrap框架中的...

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

    Bootstrap模态框具有内置的响应式设计,可以根据屏幕尺寸自动调整布局。在窄屏设备上,模态框将占据整个屏幕宽度。如果需要自定义响应式行为,可以通过媒体查询(media queries)进行调整。 六、模态事件 ...

    BootStrap模态框和select2合用时input无法获取焦点的解决方法

    Bootstrap模态框在设计时,为了防止页面其他元素在模态框打开时获得焦点,会在模态框元素上设置`tabindex="-1"`属性。这使得模态框成为当前的焦点,但同时也阻止了模态框内其他具有`tabindex`的元素(如Select2的...

    bootstrap提示框定时消失

    Bootstrap 是一个流行的前端开发框架,提供了丰富的 CSS、JS 组件,包括模态框、下拉菜单、按钮、导航等,以及一个响应式网格系统。在 Bootstrap 中,提示框(Tooltips)和弹出框(Popovers)是两个内置的组件,它们...

    ModalLayer模态框插件js弹出框

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

    Bootstrap 模态框(Modal)插件代码解析

    Bootstrap模态框(Modal)是网页设计中的一个强大工具,它允许开发者创建在当前页面上弹出的交互式窗口,而无需跳转到新的页面或打开新的窗口。这个插件基于流行的前端框架Bootstrap,为用户提供了一种简单且响应式...

    BootStrap点击保存后实现模态框自动关闭的思路(模态框)

    总的来说,Bootstrap模态框提供了一种简单而有效的方式来实现用户交互,通过`data-dismiss="modal"`属性或JavaScript,我们可以轻松地在用户完成特定操作后关闭模态框。在设计这种交互时,应考虑用户体验,确保操作...

    Tmsgbox 基于bootstrap的消息提示框组件封装 模态框组件封装

    Tmsgbox是一款专为前端开发者设计的、基于Bootstrap框架的消息提示框组件,它提供了一种高效、便捷的方式来实现模态框(Modal)功能,旨在简化网页中的通知、提示以及对话框的创建过程。通过Tmsgbox,开发者可以快速...

    可拖拽的bootstrap弹出窗口

    Bootstrap弹出窗口是一种常见于网页设计中的交互元素,它用于显示通知、消息或者提供额外的交互界面。在本项目中,我们关注的是一个可拖拽的Bootstrap弹出窗口,这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的...

    C#MVC模态框增删查改

    总的来说,"C# MVC模态框增删查改"项目展示了如何利用C# MVC框架、jQuery、Bootstrap和SQL Server数据库,实现一个简单的数据管理应用。这个项目涵盖了前端交互设计、后端数据处理和数据库操作等多个方面,对于初学...

    bootstrap中模态框、模态框的属性实例详解

    Bootstrap模态框(Modal)是该框架中一个非常重要的组件,用于在当前页面上弹出一个浮动窗口,显示额外的内容,而不会使用户离开主页面。这种设计模式在交互式应用和网页中非常常见,例如用于确认操作、展示详细信息...

    Jquery 实现弹出框(模态框)

    首先,模态框在用户界面设计中是一种常见元素,它允许用户在不离开当前页面的情况下进行交互。这种弹出式的对话框通常用于确认操作、展示详细信息或收集用户输入。 要创建一个 jQuery 模态框,我们需要以下几个关键...

    Bootstrap模态对话框的简单使用

    Bootstrap模态对话框是网页设计中常用的一种交互元素,它允许在不离开当前页面的情况下,弹出一个子窗口展示额外信息或进行交互操作。Bootstrap框架提供了便捷的方式来创建和使用模态对话框,使得开发者能够轻松地...

    Bootstrap模态登录框

    Bootstrap模态登录框是网页设计中常用的一种交互元素,它基于流行的前端开发框架Bootstrap 3.3.7版本构建。Bootstrap是一个开源的HTML、CSS和JS框架,它为开发者提供了丰富的预设样式、组件和JavaScript插件,极大地...

    基于bootstrap的前端网站设计

    Bootstrap提供了一系列预定义的组件,如导航栏、按钮、表单、下拉菜单、模态框、警告提示等。这些组件都有统一的样式,可以大大减少开发者的工作量,提高开发效率。 4. **CSS样式** Bootstrap使用Sass...

    bootstrap布局设计器

    `js`文件夹包含JavaScript代码,这可能包括Bootstrap的JavaScript插件,如模态框、下拉菜单、滚动spy等功能。Bootstrap的JavaScript是基于jQuery的,所以在这个文件夹中也可能找到jQuery库的引用。使用这些插件时,...

    js实现类bootstrap模态框动画

    总之,实现类似Bootstrap模态框的动画效果,主要涉及CSS的布局、定位、变换和过渡属性,以及JavaScript的事件监听和DOM操作。通过合理的设计和编程,我们可以创造出具有优秀用户体验的模态框组件。

Global site tag (gtag.js) - Google Analytics