这篇文章主要介绍引导模态框的使用示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
引导模态框是一个轻量级的多用途JavaScript弹出窗口,可自定义和响应式。可以使用它在网站中显示警告窗口,视频和图片。使用引导构建的网站可以使用模态框来显示条款和条件(作为注册过程的一部分),视频,甚至社交媒体小部件。
为了可以更好地理解它,我们来看一下引导模态框的各个组成部分。
引导模态框主要分为三个部分:头部(头),正文(身体)和页脚(页脚),每个部分都有自己的意义,因此我们应该正确的使用它们。我们稍后将讨论这些.Bootstrap模态框最令人兴奋的是什么?你不需要写任何JavaScript代码就可以使用它!所有的代码和样式都是由引导预定义的。你所需要做的只是使用正确的标记和属性来触发它。
<强>默认的模态框
默认的模态框如下所示:
要触发模态框,你需要添加链接或者按钮。触发元素的标记可能如下所示:
请注意,链接元素有两个自定义数据属性:data-toggle和data-target.toggle告诉引导要做什么,目标告诉引导要打开哪个元素,所以每当点击这样的链接时,都会出现一个id为“basicModal”的模态框。
现在让我们看看定义模态框所需的代码:
模态框的父div应具有与上述触发元素中使用的相同的ID。在我们的例子中是ID=癰asicModal"。
注意:父模态框元素中自定义属性aria-labelledby和aria-hidden让其可被访问。让所有人都能访问你的网站是一个很好的做法,所以你应该使用这些属性,因为它们不会对模态框的普通功能产生负面影响。
在模态框的HTML代码中,我们可以看到一个封装div嵌套在父模态框div内。这个div的类模式内容告诉引导。js在哪里查找模态框的内容。在这个div内,我们需要放置前面提到的三个部分:头部,正文和页脚。
模态框头部,顾名思义,用于给模态添加一个标题或者如“x”关闭按钮等其他元素。这些元素还应该有一个data-dismiss属性告诉引导哪个元素要隐藏。
然后我们看一下模态框的正文。可以把它看做一个打开的画布,你可以在其中添加任何类型的数据,包括嵌入YouTube视频,图像或者任何其他内容。
最后,我们看一下模态框的页脚。该区域默认为右对齐。在这个区域,你可以放置“保存”,“关闭”,“接受”等操作按钮,这些按钮与“模态”框需要表现的行为相关联。
现在我们完成了我们的第一个模态框!你可以在我们的演示页面上查看。
<强>改变模态框的大小
引导模态框是响应式的,灵活的。
引导3.3.7中模态框有两种新的风格:大和小。给divmodal-dialogdiv添加一个修饰符类modal-lg可以获得一个更大的模态框,添加modal-sm可以获得一个更小的模态框。
<强>使用jQuery激活模态框
模态框是一个jQuery插件,所以如果你想使用jQuery控制模态框的话,你需要在模态框的选择器上调用.modal()方法,例如:
这里的“选项”是可以传递给自定义行为的JavaScript对象,例如:
可用的方法包括:
背景:这可以是真正的或静态的。这定义你是否希望用户能够通过单击背景来关闭模态。
