Bootstrap的一些笔记——modal

发布时间:2024-11-19 16:32

前端UI库React-Bootstrap的基本使用 #生活知识# #编程教程#

最新推荐文章于 2024-08-21 09:17:03 发布

friskit 于 2012-02-12 10:53:21 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

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

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

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

<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"的属性。这样改造完成的页面代码:

<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提供了一系列的事件等等。。。不多说了⋯⋯

网址:Bootstrap的一些笔记——modal https://www.yuejiaxmz.com/news/view/138499

相关内容

笔记
印象笔记
安卓学习随笔之 android:layout
[笔记本电脑] 如何清洁笔记本电脑
健身笔记
什么能快速清洁地板上的铅笔芯印记的?是不是只有地板的一些印记?
笔记本电脑的使用方法
笔记本如何保养
《养花》读书笔记
做笔记=抄书?你还是不会学习!这样做笔记才能高效

随便看看