站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

Bootstrap学习之浅析模态框的使用方法

时间:2021-12-18 [网络编程]作者:fabuyuan 浏览:7 次

本篇文章带大家了解一下Bootstrap中的模态框,介绍一下改变模态框大小、在模态框中加载远程内容的方法,希望对大家有所帮助!

Bootstrap学习之浅析模态框的使用方法  2

在本教程中,我们将讨论十分有用的 Bootstrap jQuery插件——模态框

Bootstrap 模态框是一个轻量级的多用途JavaScript弹出窗口,可自定义和响应式。可以使用它在网站中显示警告窗口、视频和图片。使用Bootstrap构建的网站可以使用模态框来显示条款和条件(作为注册过程的一部分),视频,甚至社交媒体小部件。

为了可以更好地理解它,我们来看一下Bootstrap模态框的各个组成部分。【相关推荐:《bootstrap教程》】

Bootstrap 模态框主要分为三个部分:头部(header),正文(body)和页脚(footer)。每个部分都有自己的意义,因此我们应该正确的使用它们。我们稍后将讨论这些。Bootstrap模态框最令人兴奋的是什么?你不需要写任何JavaScript代码就可以使用它!所有的代码和样式都是由Bootstrap预定义的。你所需要做的只是使用正确的标记和属性来触发它。

默认的模态框

默认的模态框如下所示:

Bootstrap学习之浅析模态框的使用方法  2

要触发模态框,你需要添加链接或者按钮。触发元素的标记可能如下所示:

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

请注意,link元素有两个自定义数据属性:data-toggledata-target。toggle告诉Bootstrap要做什么,target告诉Bootstrap要打开哪个元素。所以每当点击这样的链接时,都会出现一个id为“basicModal”的模态框。

现在让我们看看定义模态框所需的代码:

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </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>
  </div>
</div>

模态框的父div应具有与上述触发元素中使用的相同的ID。在我们的例子中是id="basicModal"

注意:父模态框元素中自定义属性aria-labelledbyaria-hidden让其可被访问。让所有人都能访问你的网站是一个很好的做法,所以你应该使用这些属性,因为它们不会对模态框的普通功能产生负面影响。

在模态框的HTML代码中,我们可以看到一个封装div嵌套在父模态框div内。这个div的类modal-content告诉bootstrap.js在哪里查找模态框的内容。在这个div内,我们需要放置前面提到的三个部分:头部,正文和页脚。

模态框头部,顾名思义,用于给模态添加一个标题或者如“x”关闭按钮等其他元素。这些元素还应该有一个data-dismiss属性告诉Bootstrap哪个元素要隐藏。

然后我们看一下模态框的正文。可以把它看做一个打开的画布,你可以在其中添加任何类型的数据,包括嵌入YouTube视频,图像或者任何其他内容。

最后,我们看一下模态框的页脚。该区域默认为右对齐。在这个区域,你可以放置“保存”,“关闭”,“接受”等操作按钮,这些按钮与“模态框”需要表现的行为相关联。

改变模态框的大小

之前我提到Bootstrap模态框是响应式的、灵活的。我们将在本节中看到如何更改其大小。

Bootstrap 3.3.7中模态框有两种新的风格:大和小。给divmodal-dialogdiv 添加一个修饰符类modal-lg可以获得一个更大的模态框,添加modal-sm可以获得一个更小的模态框。

使用jQuery激活模态框

模态框是一个jQuery插件,所以如果你想使用jQuery控制模态框的话,你需要在模态框的选择器上调用.modal()方法。例如:

$('#basicModal').modal(options);

这里的“options”是可以传递给自定义行为的JavaScript对象。例如:

var options = {
    "backdrop" : "static"
}

可用的option包括:

  • backdrop:这可以是truestatic。这定义你是否希望用户能够通过单击背景来关闭模态。
  • keyboard:如果设置为true则模态框将通过ESC键关闭。
  • show:用于打开和关闭模态框。它可以是truefalse
  • remote:这是最炫酷的选择之一。它可以用于使用jQuery的load()方法加载远程内容。你需要在此选项中指定外部页面。默认设置为false

Bootstrap模态框的事件

你可以通过使用在打开和关闭模态框时触发的各种事件来进一步自定义Bootstrap模态的普通行为。这些事件必须使用jQuery的.on()方法绑定。

可用的事件有:

  • show.bs.modal:在模态框打开之前被触发。
  • shown.bs.modal:在显示模态框后触发。
  • hide.bs.modal:在模态框被隐藏之前触发。
  • hidden.bs.modal:在模态关闭后触发。
  • loaded.bs.modal:使用上述的remote选项在远程内容成功加载到模态框的内容区域时触发。

你可以像这样使用上述之一的事件:

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Modal is successfully shown!');
});

在模态框中加载远程内容

在Bootstrap模式中加载远程内容有三种不同的方法。

第一种方法,如上所述,是使用对象options中的remote选项。其他两种方式都是没有JavaScript的,如下所示。

你可以为模态框的触发元素中的href属性提供一个值。在我们的例子中,触发器是一个链接。例如,我们可以不使用我们之前提到的值#而将URL包含在特定页面中:

<a class="btn btn-lg btn-default" 
   data-toggle="modal" 
   data-target="#largeModal" 
   href="remote-page.html">Click to open Modal</a>

你还可以为触发元素提供data-remote的自定义数据属性,而不是使用href属性。例如:

<a class="btn btn-lg btn-default" data-toggle="modal" 
   data-target="#largeModal" 
   data-remote="remote-page.html">Click to open Modal</a>

结论

模态框是Bootstrap 3提供的最好的插件之一。对于初级设计师来说,它是不需要任何JavaScript代码而在弹出式画面中加载内容的最佳方式之一。

更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!

以上就是Bootstrap学习之浅析模态框的使用方法的详细内容,更多请关注站长家园其它相关文章!

本文标签:  Bootstrap模态框

转载请注明来源:Bootstrap学习之浅析模态框的使用方法

本文永久链接地址:https://www.adminjie.com/post/6590.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 完全掌握JavaScript执行机制

      完全掌握JavaScript执行机制

      本篇文章给大家带来了关于JavaScript执行机制的相关问题,其中包括JavaScript单线程和JavaScript同步异步的相关知识,希望对大家有帮助。一...

    • 手把手教你CSS架构之SMACSS

      手把手教你CSS架构之SMACSS

      本篇文章给大家带来了关于css架构SMACSS的相关知识,其中会讲到什么是smacss以及该架构分类的相关问题,希望对大家有帮助。因为CSS只有一个作用域,...

    • 一起聊聊MySQL基础之触发器和事件

      一起聊聊MySQL基础之触发器和事件

      本篇文章给大家带来了关于mysql中触发器和事件的相关知识,其中包括触发器使用注意事项、查看和删除事件、事件使用注意事项等等,希望对大家有帮助。触发器我们使用M...

    • 使用jq如何删除css样式

      使用jq如何删除css样式

      删除方法:1、用removeClass()或toggleClass()移除指定CSS类,语法“removeClass("类名")”或“toggleClass("...

    • css3如何让盒子水平居中

      css3如何让盒子水平居中

      css3让盒子水平居中的方法:1、使用margin属性,给盒子元素添加“margin:0auto;”样式即可水平居中;2、利用flex弹性布局来实现水平居中...

    热门文章