[Bootstrap]modald出框_html-js-css

概述写在前面在实际开发中，为了友好，更需要一种美观的d出框，js原生的alert，很难满足需求。这里推荐一个bootstrap的d出框。一个例子先看效果吧代码：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>模式d出框</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><link href="Css/bootstrap.min.css" rel="stylesheet" /><script src="JS/jquery.js"></script><script src="JS/bootstrap.min.js"></script><script></script><style>.blue {background-color: #0094ff;}.text-center {text-align: center;}</style></head><body><input type="button" data-target="#loginModal" data-toggle="modal" name="name" class="form-control bt-red" value="登录" /><div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header blue">登录</div><div class="modal-body"><input type="text" class="form-control" placeholder="请输入用户名" name="name" /><input type="password" class="form-control" placeholder="请输入密码" value="新建文件夹" name="name" /></div><div class="modal-footer"><div class="form-control text-center">登录</div><div class="form-control text-center" data-dismiss="modal"><div class="button"></div>取消</div></div></div></div></div></body></html>注意data-target属性，指向了model的id，所以点击按钮，model就会d出来了。用js也可以来控制<script>$("#btnLogin").click(function () {//显示$("#loginModal").modal("show");//隐藏$('#loginModal').modal('hide');//切换$('#myModal').modal('toogle');});</script> 总结之所以推荐这个d出框，是因为这个 *** 作更方便，因为在项目中用到bootstrap，这样也不需要再去添加其他的引用了。如果用来作为提示框，可以修改modal-body中的内容为字符串就可以了。写在前面在实际开发中，为了友好，更需要一种美观的d出框，js原生的alert，很难满足需求。这里推荐一个bootstrap的d出框。一个例子先看效果吧代码：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>模式d出框</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><link href="Css/bootstrap.min.css" rel="stylesheet" /><script src="JS/jquery.js"></script><script src="JS/bootstrap.min.js"></script><script></script><style>.blue {background-color: #0094ff;}.text-center {text-align: center;}</style></head><body><input type="button" data-target="#loginModal" data-toggle="modal" name="name" class="form-control bt-red" value="登录" /><div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header blue">登录</div><div class="modal-body"><input type="text" class="form-control" placeholder="请输入用户名" name="name" /><input type="password" class="form-control" placeholder="请输入密码" value="新建文件夹" name="name" /></div><div class="modal-footer"><div class="form-control text-center">登录</div><div class="form-control text-center" data-dismiss="modal"><div class="button"></div>取消</div></div></div></div></div></body></html>注意data-target属性，指向了model的id，所以点击按钮，model就会d出来了。用js也可以来控制<script>$("#btnLogin").click(function () {//显示$("#loginModal").modal("show");//隐藏$('#loginModal').modal('hide');//切换$('#myModal').modal('toogle');});</script>

写在前面

一个例子

模式d出框

<span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #0000ff;"&gt;</</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #800000;"&gt;script</span><span &gt;></span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #0000ff;"&gt;<</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #800000;"&gt;style</span><span &gt;></span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #800000;"&gt;    .blue </span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #000000;"&gt;{</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #ff0000;"&gt;        background-<a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a></span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #000000;"&gt;:</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #0000ff;"&gt; #0094ff</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #000000;"&gt;;</span>    <span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #000000;"&gt;}</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #800000;"&gt;    .text-center </span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #000000;"&gt;{</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #ff0000;"&gt;        text-a<a href="https://m.jb51.cc/tag/li/" target="_blank" >li</a>gn</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #000000;"&gt;:</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #0000ff;"&gt; center</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #000000;"&gt;;</span>    <span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #f5f5f5; <a href="https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #000000;"&gt;}</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #0000ff;"&gt;</</span><span https://m.jb51.cc/tag/color/" target="_blank" >color</a>: #800000;"&gt;style</span><span &gt;></span>

<span ></<span >head<span >>
<span ><<span >body<span >>
<span ><<span >input <span >type<span >="button"<span > data-target<span >="#loginModal"<span > data-toggle<span >="modal"<span > name<span >="name"<span > class<span >="form-control bt-red"<span > value<span >="登录" <span >/>
<span >
<span ><<span >div <span >class<span >="modal fade"<span > ID<span >="loginModal"<span > tabindex<span >="-1"<span > role<span >="dialog"<span > aria-labelledby<span >="myModalLabel"<span > aria-hIDden<span >="true"<span >>
<span ><<span >div <span >class<span >="modal-dialog"<span >>
<span ><<span >div <span >class<span >="modal-content"<span >>
<span ><<span >div <span >class<span >="modal-header blue"<span >><span >
登录
<span ></<span >div<span >>
<span ><<span >div <span >class<span >="modal-body"<span >>
<span ><<span >input <span >type<span >="text"<span > class<span >="form-control"<span > placeholder<span >="请输入用户名"<span > name<span >="name" <span >/>
<span ><<span >input <span >type<span >="password"<span > class<span >="form-control"<span > placeholder<span >="请输入密码"<span > value<span >="新建文件夹"<span > name<span >="name" <span >/>
<span ></<span >div<span >>
<span ><<span >div <span >class<span >="modal-footer"<span >>
<span ><<span >div <span >class<span >="form-control text-center"<span >>登录<span ></<span >div<span >>
<span ><<span >div <span >class<span >="form-control text-center"<span > data-dismiss<span >="modal"<span >><<span >div <span >class<span >="button"<span >></<span >div<span >>取消<span ></<span >div<span >>
<span ></<span >div<span >>
<span ></<span >div<span >>
<span ></<span >div<span >>
<span ></<span >div<span >>
<span ></<span >body<span >>
<span ></<span >HTML<span >>

注意

用Js也可以来控制

总结

以上是内存溢出为你收集整理的[Bootstrap]modald出框全部内容，希望文章能够帮你解决[Bootstrap]modald出框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://www.outofmemory.cn/web/1145600.html

[Bootstrap]modald出框

发表评论

评论列表（0条）