`

简化Bootstrap3 Modal使用: BootstrapDialog

阅读更多
使用Bootstrap3 Modal前, 你需要编写一堆HTML:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


对写javascript的程序猿来说, 这是反猿类的, 程序猿喜欢的方式应该是:
BootstrapDialog.alert('I want banana!');  


Demos: http://nakupanda.github.io/bootstrap3-dialog/

Project: https://github.com/nakupanda/bootstrap3-dialog/
分享到:
评论

相关推荐

    基于Bootstrap V3的Modal 进行 Dialog 二次封装 原创文章

    在zl_dialog.js中,作者可能对Bootstrap的默认Modal进行了以下几方面的增强: 1. **样式定制**:增加了更多的样式选项,以适应不同的设计需求,如调整对话框的大小、颜色、边框等。 2. **功能扩展**:可能添加了新...

    ng2-bootstrap-modal:用于简化引导模式对话框的库

    只需为.modal和.modal-dialog类编写CSS。 . modal { position : fixed; top : 0 ; right : 0 ; bottom : 0 ; left : 0 ; z-index : 1050 ; overflow : hidden; -webkit-overflow-scrolling : touch; outline : 0 ;}...

    bootstrap-modal

    总的来说,Bootstrap Modal插件通过简洁的API和强大的功能,极大地简化了在网页中添加模态对话框的过程,是Web开发中的必备工具之一。通过深入理解和熟练运用,开发者可以构建出更加交互友好、用户体验良好的网站...

    bootstrap3-dialog-master对话框

    var dialog = new BootstrapDialog({ title: '对话框标题', message: '对话框内容', buttons: [ /* 按钮配置 */ ] }); ``` 4. **显示对话框**:通过调用API方法显示对话框。 ```javascript dialog.open(); ``` ...

    bootstrap.dialog

    Bootstrap Dialog 是一个基于Bootstrap框架的对话框插件,它提供了高度可定制的模态(Modal)、警告(Alert)和确认(Confirm)对话框。Bootstrap本身是Twitter推出的一个用于前端开发的开源工具集,它包括CSS、...

    modal_dialog_base

    3. **前端框架**:如React、Vue、Angular等,都有内置的组件库,例如React的`react-modal`,提供封装好的模态对话框组件,简化开发过程。 4. **Bootstrap**:流行的前端框架,提供现成的模态对话框模板,只需简单...

    bootstrap演示20种不同的手机响应式弹出层modal特效

    总之,这个主题涵盖了Bootstrap的基础知识,特别是Modal组件的使用,以及如何借助jQuery增强其功能。通过实际操作和学习提供的示例,开发者可以提升自己的前端技能,创造出更加丰富和引人入胜的网页交互体验。

    Bootstrap练习:百度登录框

    按钮通过数据属性`data-toggle="modal"`和`data-target="#myModal"`与模态框关联,而模态框本身则使用`.modal`类和`.modal-dialog`、`.modal-content`等子元素来定义其外观和行为。 HTML5在这里起到了基础架构的...

    BootStrap modal实现拖拽功能

    Bootstrap Modal是Bootstrap框架提供的一个组件,用于创建模态对话框,而拖拽功能通常指的是用户可以通过鼠标操作移动页面中的元素。 在Bootstrap框架中实现Modal组件的拖拽功能,需要借助于jQuery和jQuery UI库。...

    bootstrap入门helloworld

    Bootstrap的核心特点在于其丰富的预设样式、组件和JavaScript插件,这些都极大地简化了网页的构建过程。下面我们将详细探讨Bootstrap的基础知识和如何创建一个基本的"Hello, World!"页面。 1. **引入Bootstrap**: ...

    Bootstrap3 插件.pdf_前端学习资料

    Bootstrap3 是一个流行的前端开发框架,它提供了丰富的样式和组件,极大地简化了网页设计和开发。这份“Bootstrap3 插件.pdf”学习资料主要涵盖了如何使用 Bootstrap 的各种插件,这些插件能够增强用户体验和交互性...

    asp.net core bootstrap ui 控件 taghelper

    &lt;div taghelper="bootstrap-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt; &lt;div class="modal-dialog" role="document"&gt; &lt;div class="modal-...

    bootstrap3.0.3手册

    11. **JavaScript插件**:除了CSS,Bootstrap 3还提供了如模态框、轮播、下拉菜单等JavaScript插件,使用`.js-file-name.js`文件引入并调用相应的JavaScript函数即可激活它们。 12. **自定义Bootstrap**:通过修改...

    前端bootstrap框架项目一套

    3. 模态框(Modal):Bootstrap的模态框通过`.modal`、`.modal-dialog`和`.modal-content`类实现,用于在当前页面上弹出一个可交互的窗口,无需跳转新页面。 4. 下拉菜单(Dropdown):`.dropdown`和`.dropdown-...

    bootstrap模态框实现拖拽效果

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

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

    在JavaScript部分,我们可以使用Bootstrap提供的API来控制模态框的行为,例如显示、隐藏模态框,以及监听模态框相关的事件。在本例中,虽然没有给出具体的JavaScript代码,但通常会包含对登录和注册按钮的事件处理,...

    Bootstrap弹出框

    总的来说,Bootstrap弹出框是一个强大且灵活的工具,它简化了网页中的交互元素创建,让开发者能够快速构建美观且功能丰富的弹出窗口。在使用过程中,我们可以通过调整HTML结构、应用不同类和利用JavaScript API来...

    jquery login modal dialog

    标题 "jquery login modal dialog" 指的是使用 jQuery 实现的一种登录模态对话框功能。在 Web 开发中,模态对话框常用于提供一种不中断用户主界面体验的交互方式,例如显示登录表单。jQuery 是一个广泛使用的 ...

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

    3. `&lt;div class="modal-content"&gt;`:模态框的实际内容区域,包含了头部、主体和底部。 - `&lt;div class="modal-header"&gt;`:包含模态框的标题和关闭按钮。 - `&lt;div class="modal-body"&gt;`:模态框的主体内容区域,可以...

Global site tag (gtag.js) - Google Analytics