将Bootstarp4模态框功能改造成登陆弹出页
使用Bootstrap的JavaScript模态框插件可以为网站添加醒目的提示和交互,用于通知用户、访客交互、消息警示或自定义的内容交互。同时比如一些不想分成多个页面的功能,也可以点击弹出登陆框、验证框等都是很棒的选择。
先看一下官方给出的示例代码
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
如果是熟悉前端的朋友肯定看的就很清楚,其实实现的就是在页面有一个按钮,点击这个按钮,弹出一个新的框。然后显示下面的内容。
页面上有关闭的功能,还有下面的确认等按钮。这样就很方便了。接下来我们来根据这个样例改成一个我们自己的登陆弹出功能吧。
这里我们还需要用到
bootstarp4
的表单(Form)
组件配合
先看看最终的样式
分析
要动手之前先搞清楚他们之间的关系,为什么点击了按钮,框就会弹出来,弹出来的结构又是怎么划分的?这些问题都搞清楚了,就比较好弄了。
在两个最父级的button
和div
上可以看到div
有一个id
是exampleModal
,而在button
上又有一个data-target="#exampleModal"
然后在弹出的div
里面还有2个属性aria-labelledby="exampleModalLabel"
和里面的id="exampleModalLabel"
在搞懂了关系后,那么大致的意思就是
点击拥有data-target="#loginModal"
属性的按钮时,bootstarp4
会帮我们在页面寻找是否有id="loginModal"
的div
模态框,在找到后就会显示。
显示的内容这些都是标准的,一般不需要大改。主要需要注意的就是里面的几个css类modal-header
、modal-body
、modal-footer
.
可以理解为,头部就是模态框的最上面显示的左边的标题和右边的一个关闭的x,底部就是右下角有取消、登陆的两个按钮。而中间,我们只要嵌入一个form表单即可解决。
动手实践
<!-- 模态框-登陆按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
登陆
</button>
<!-- 模态框-弹出界面 -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel">登陆站点</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱&手机号</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">我们将会对您的信息进行保密</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">7天不用登陆</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary">登 陆</button>
</div>
</form>
</div>
</div>
</div>
</div>
就可以实现了,当然做这些之前,一定要先引入好需要引入的文件。