Bootstrap的一些笔记—

Bootstrap的一些笔记——modal

阅读量：6612 次

发布时间：2019-06-24

本文共 2118 字，大约阅读时间需要 7 分钟。

modal是Bootstrap提供的一个“窗口组件”，可以配合js实现弹出窗口的效果。

modal的class是“modal”，其中必须包含三个div部分，属性分别问modal-header,modal-body,modal-footer.

同时modal可以用来放置注册表单，示例如下：

[html]

<section>

<div class="row">

<div class="span12">

<form class="modal form-horizontal" method="post" action="http://localhost">

<div class="modal-header">

<h1>Header</h1>

</div>

<div class="modal-body">

<fieldset>

<div class="control-group">

<label class="control-label" for="username">Username:</label>

<div class="controls">

<input type="text" name="username">

</div>

</div>

<div class="control-group">

<label class="control-label" for="password">Password:</label>

<div class="controls">

<input type="password" name="password">

</div>

</div>

</fieldset>

</div>

<div class="modal-footer">

<input type="submit" class="btn btn-primary" value="Submit!"></button>

</div>

</form>

</div>

</div>

</section>

如果我们利用Bootstrap提供的modal插件，可以形成点击弹出浮动窗口的效果。

这需要让modal的div带有属性hide和fade，指定id。并且一开始的stype是display:none以便隐藏同时还需要一个用来控制弹出的按钮，这个按钮必须有data-toggle="modal"的元素，href=modal的id。

如果想要在弹出表单中加入关闭按钮，则需要让按钮带有data-dismiss="modal"的属性。这样改造完成的页面代码：

[html]

<section>

<a data-toggle="modal" href="#regModal" class="btn btn-primary">show!</a>

<div class="row">

<form id="regModal" class="modal hide fade form-horizontal" method="post" action="http://localhost" style="display:none">

<div class="modal-header">

<h1>Header</h1>

</div>

<div class="modal-body">

<fieldset>

<div class="control-group">

<label class="control-label" for="username">Username:</label>

<div class="controls">

<input type="text" name="username">

</div>

</div>

<div class="control-group">

<label class="control-label" for="password">Password:</label>

<div class="controls">

<input type="password" name="password">

</div>

</div>

</fieldset>

</div>

<div class="modal-footer">

<input type="submit" class="btn btn-primary" value="Submit!">

<input type="button" class="btn" value="Close!" data-dismiss="modal">

</div>

</form>

</div>

</section>

当然既然这东西利用了js，也就能用js打开。一句话⋯⋯$("#regModal").modal()

————个人觉得用js方式打开比较好⋯⋯便于修改⋯⋯反正装上jq是必然。就不在乎这点儿代码量了

同时modal这个plugin提供了一系列的事件等等。。。不多说了⋯⋯

转载于:https://my.oschina.net/u/2357525/blog/464071

你可能感兴趣的文章

Spring Cloud云架构 - SSO单点登录之OAuth2.0 登出流程(3)

web网站加速之CDN(Content Delivery Network)技术原理

Planner .NET日历日程控件能给你的应用程序提供多种日历日程功能

查看>>

【DM642】ICELL Interface—Cells as Algorithm Containers

查看>>

svs 在创建的时候上传文件夹 bin obj 这些不要提交

查看>>

细说浏览器特性检测（1）-jQuery1.4添加部分

查看>>

Java基础-算术运算符（Arithmetic Operators）

查看>>

C#编程（四十七）----------集合接口和类型

查看>>

【转】关于大型网站技术演进的思考（十二）--网站静态化处理—缓存（4）

查看>>

积跬步，聚小流------Bootstrap学习记录(1)

查看>>