经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » CSS » 查看文章
整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好
来源：cnblogs　　作者：子钦加油　　时间：2018/10/22 16:10:06　　对本文有异议

效果图：

我的代码示例：




  1. <!--提示模态框-->
  2. 	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  3.         <div class="modal-dialog" role="document">
  4.             <div class="modal-content">
  5.                 <div class="modal-header">
  6.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  7.                         <span aria-hidden="true">×</span>
  8.                     </button>
  9.                     <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
  10.                 </div>
  11.                 <div class="modal-body">
  12.                     <p>您的操作不可逆</p>
  13.                 </div>
  14.                 <div class="modal-footer">
  15.                     <button type="button" data-dismiss="modal" class="btn sr-only">取消</button>
  16.                     <button type="button" data-dismiss="modal" id="quedingbtn" class="btn btn-primary">确定</button>
  17.                 </div>
  18.             </div>
  19.         </div>
  20.     </div>

　整段代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>{{$title}}</title>
  6. <meta name="keywords" content="{{$keywords}}" />
  7. <meta name="description" content="{{$description}}" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <link type="image/x-icon" href="/static/images/logo.jpg" rel="shortcut icon">
  10. <link href="/static/bootstrap/css/bootstraphome.min.css" rel="stylesheet">
  11. <link href="/static/home/bootstrapvalidator/dist/css/bootstrapValidator.css" rel="stylesheet">
  12. <link href="/static/home/css/base.css" rel="stylesheet">
  13. <link href="/static/home/css/index.css" rel="stylesheet">
  14. <link href="/static/home/css/m.css" rel="stylesheet">
  15. <script src="/static/home/js/jquery.min.js" ></script>
  16. <script src="/static/bootstrap/js/bootstrap.min.js" ></script>
  17. <script src="/static/home/bootstrapvalidator/dist/js/bootstrapValidator.js" ></script>
  18. <script src="/static/home/js/hc-sticky.js"></script>
  19. <script src="/static/home/js/comm.js"></script>
  20.  
  21. <style>
    /*去掉type为number时 input后面加减号问题*/
  22. input[type='number']{-moz-appearance:textfield;}
  23. input[type=number]::-webkit-inner-spin-button,
  24. input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
  25.  
  26.  @media screen and (min-width: 768px) {
  27.     .modal-dialog {
  28. 		right: auto;
  29. 		left: 0%;
  30. 		width: 300px;
  31. 		padding-top: 30px;
  32. 		padding-bottom: 30px;
  33.     }
  34.     .modal-content {
  35. 		-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  36. 		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  37.     }
  38. }
  39. @media only screen and (max-width: 479px){
  40. 	.modal{
  41. 		position: fixed;
  42. 		top: 200px;
  43. 		right: 0;
  44. 		bottom: 0;
  45. 		left: 0;
  46. 		z-index: 10500;
  47. 		display: none;
  48. 		overflow: hidden;
  49. 		-webkit-overflow-scrolling: touch;
  50. 		outline: 0;
  51. 	}
  52. 	.modal-dialog {
  53. 		right: auto;
  54. 		left: 0%;
  55. 		width: 300px;
  56. 		margin:0 auto;
  57. 		padding-top: 30px;
  58. 		padding-bottom: 30px;
  59.     }
  60.     .modal-content {
  61. 		-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  62. 		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  63.     }
  64. }
  65.  
  66.  
  67. </style>
  68. <!--[if lt IE 9]>
  69. <script src="js/modernizr.js"></script>
  70. <![endif]-->
  71. </head>
  72. <body>
  73. <header id="header">
  74.   <div class="navbar">
  75.     <div class="topbox">
  76.       <p class="welcome">由上海交通大学教育集团整合海内外顶尖的证券投资领域专家资源，推出权威、特色、实用的《私募基金经理高级研修班</p>
  77.       <div class="searchbox">
  78.         <div id="search_bar" class="search_bar">
  79.           <form  id="searchform" action="[!--news.url--]e/search/index.php" method="post" name="searchform">
  80.             <input class="input" placeholder="想搜点什么呢.." type="text" name="keyboard" id="keyboard">
  81.             <input type="hidden" name="show" value="title" />
  82.             <input type="hidden" name="tempid" value="1" />
  83.             <input type="hidden" name="tbname" value="news">
  84.             <input type="hidden" name="Submit" value="搜索" />
  85.             <p class="search_ico"> <span></span></p>
  86.           </form>
  87.         </div>
  88.       </div>
  89.     </div>
  90.   </div>
  91.    <include file="public:navigation" />
  92. </header>
  93. <div class="wrapper">
  94.   <main>
  95.     <h2 class="place">您现在的位置是：网站首页> <a href="/">{{$data.a_Title}}</a></h2>
  96.     <div class="infosbox">
  97.       <div class="newsview">
  98.         <h3 class="news_title">报名信息填写</h3>
  99.         <form name="dataForm" enctype="multipart/form-data" class="form-horizontal top15" action="{{:url('index/joinus')}}">
  100. 			<div class="input-group">
  101. 				<label class="input-group-addon" id="inputGroupSuccess3">姓名<span style="color:red;">*</span></label>
  102. 				<input type="text" class="form-control" id="username" aria-describedby="inputGroupSuccess3Status" name="username" required placeholder="name">
  103. 				<span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok0" aria-hidden="true"></span>
  104. 				<span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove0" aria-hidden="true"></span>
  105. 			</div>
  106. 			<span id="inputGroupSuccess3Status0" class="sr-only" style="color:red;">(审核通过)</span>
  107. 			<br><br>
  108. 			<div class="input-group">
  109. 				<span class="input-group-addon" id="basic-addon1">手机号<span style="color:red;">*</span></span>
  110. 				<input type="number" class="form-control" id="tel" name="tel" required placeholder="tel" aria-describedby="basic-addon1" maxlength="2" oninput="if(value.length>11)value=value.slice(0,11)">
  111. 				<span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok1" aria-hidden="true"></span>
  112. 				<span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove1" aria-hidden="true"></span>
  113. 			</div>
  114. 			<span id="inputGroupSuccess3Status1" class="sr-only" style="color:red;">(审核通过)</span>
  115. 			<br><br>
  116. 			<div class="input-group">
  117. 				<span class="input-group-addon" id="basic-addon1">公司/单位<span style="color:red;">*</span></span>
  118. 				<input type="text" class="form-control" id="company" name="company" required placeholder="company" aria-describedby="basic-addon1">
  119. 				<span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok2" aria-hidden="true"></span>
  120. 				<span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove2" aria-hidden="true"></span>
  121. 			</div>
  122. 			<span id="inputGroupSuccess3Status2" class="sr-only" style="color:red;">(审核通过)</span>
  123. 			<br><br>
  124. 			<div class="input-group">
  125. 				<span class="input-group-addon" id="basic-addon1">职位<span style="color:red;">*</span></span>
  126. 				<input type="text" class="form-control" id="job" name="job" required placeholder="job" aria-describedby="basic-addon1">
  127. 				<span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok3" aria-hidden="true"></span>
  128. 				<span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove3" aria-hidden="true"></span>
  129. 			</div>
  130. 			<span id="inputGroupSuccess3Status3" class="sr-only" style="color:red;">(审核通过)</span>
  131. 			<br><br>
  132. 			<div class="input-group">
  133. 				<span class="input-group-addon" id="basic-addon1">邮箱<span style="color:red;">*</span></span>
  134. 				<input type="text" class="form-control" id="email" name="email" required placeholder="email" aria-describedby="basic-addon1">
  135. 				<span class="glyphicon glyphicon-ok form-control-feedback sr-only" id="ok4" aria-hidden="true"></span>
  136. 				<span class="glyphicon glyphicon-remove form-control-feedback sr-only" id="remove4" aria-hidden="true"></span>
  137. 			</div>
  138. 			<span id="inputGroupSuccess3Status4" class="sr-only" style="color:red;">(审核通过)</span>
  139. 			<div class="input-group" style="margin:50px auto 100px;">
  140. 				<!--<a class="btn btn-primary btn-lg btn-save">提 交</a>-->
  141. 				<input type="hidden" id="aid" name="aid" value="{{$data.a_Id}}" />
  142. 				<button type="button" class="btn btn-primary btn-lg" id="validateBtn" style="outline:none;">提 交</button>
  143. 			</div>			
  144. 		</form>
  145.       </div>
  146.     </div>
  147.   </main>
  148.   <aside class="sidebar">
  149.     <!--分类-->
  150. 	<!--<include file="public:fenlei" />-->
  151.     <!--关于我-->
  152.     <include file="public:aboutme" />
  153.     <!--推荐栏目-->
  154.     <include file="public:tjlm" />
  155.     <!--图片精选-->
  156.     <include file="public:tpjx" />
  157.   </aside>
  158.   <!--sidebar end--> 
  159. </div>
  160. <!--wrapper end-->
  161.  <include file="public:footer" />
  162. <a href="#" class="cd-top">Top</a>
  163.  
  164. <!--提示模态框-->
  165. 	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  166.         <div class="modal-dialog" role="document">
  167.             <div class="modal-content">
  168.                 <div class="modal-header">
  169.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  170.                         <span aria-hidden="true">×</span>
  171.                     </button>
  172.                     <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
  173.                 </div>
  174.                 <div class="modal-body">
  175.                     <p>您的操作不可逆</p>
  176.                 </div>
  177.                 <div class="modal-footer">
  178.                     <button type="button" data-dismiss="modal" class="btn sr-only">取消</button>
  179.                     <button type="button" data-dismiss="modal" id="quedingbtn" class="btn btn-primary">确定</button>
  180.                 </div>
  181.             </div>
  182.         </div>
  183.     </div>
  184.  
  185. <script type="text/javascript">
  186. 	$(document).ready(function(){
  187. 		//姓名验证
  188. 		$("#username").keyup(function(){
  189. 			var username = $("#username").val();
  190. 			if(!username){
  191. 				$("#inputGroupSuccess3Status0").removeClass("sr-only");
  192. 				$("#inputGroupSuccess3Status0").html("姓名不能为空！");
  193. 				$(".glyphicon-remove#remove0").removeClass("sr-only");
  194. 				$(".glyphicon-ok#ok0").addClass("sr-only");
  195. 			}else{
  196. 				$("#inputGroupSuccess3Status0").removeClass("sr-only");
  197. 				$("#inputGroupSuccess3Status0").html("审核通过！");
  198. 				$(".glyphicon-remove#remove0").addClass("sr-only");
  199. 				$(".glyphicon-ok#ok0").removeClass("sr-only");
  200. 			}
  201. 		})
  202. 		//手机号验证
  203. 		$("#tel").keyup(function(){
  204. 			var tel = $("#tel").val();
  205. 			var reg = /^0?(13[0-9]|17[0-9]|15[0123456789]|18[0123456789]|14[57])[0-9]{8}$/;
  206. 			if(!tel || !reg.test(tel)){
  207. 				$("#inputGroupSuccess3Status1").removeClass("sr-only");
  208. 				$("#inputGroupSuccess3Status1").html("手机号格式不正确！");
  209. 				$(".glyphicon-remove#remove1").removeClass("sr-only");
  210. 				$(".glyphicon-ok#ok1").addClass("sr-only");
  211. 			}else{
  212. 				$("#inputGroupSuccess3Status1").removeClass("sr-only");
  213. 				$("#inputGroupSuccess3Status1").html("审核通过！");
  214. 				$(".glyphicon-remove#remove1").addClass("sr-only");
  215. 				$(".glyphicon-ok#ok1").removeClass("sr-only");
  216. 			}
  217. 		})
  218. 		//公司/单位验证
  219. 		$("#company").keyup(function(){
  220. 			var company = $("#company").val();
  221. 			if(!company){
  222. 				$("#inputGroupSuccess3Status2").removeClass("sr-only");
  223. 				$("#inputGroupSuccess3Status2").html("公司/单位不能为空！");
  224. 				$(".glyphicon-remove#remove2").removeClass("sr-only");
  225. 				$(".glyphicon-ok#ok2").addClass("sr-only");
  226. 			}else{
  227. 				$("#inputGroupSuccess3Status2").removeClass("sr-only");
  228. 				$("#inputGroupSuccess3Status2").html("审核通过！");
  229. 				$(".glyphicon-remove#remove2").addClass("sr-only");
  230. 				$(".glyphicon-ok#ok2").removeClass("sr-only");
  231. 			}
  232. 		})
  233. 		//职位验证
  234. 		$("#job").keyup(function(){
  235. 			var job = $("#job").val();
  236. 			if(!job){
  237. 				$("#inputGroupSuccess3Status3").removeClass("sr-only");
  238. 				$("#inputGroupSuccess3Status3").html("职位不能为空！");
  239. 				$(".glyphicon-remove#remove3").removeClass("sr-only");
  240. 				$(".glyphicon-ok#ok3").addClass("sr-only");
  241. 			}else{
  242. 				$("#inputGroupSuccess3Status3").removeClass("sr-only");
  243. 				$("#inputGroupSuccess3Status3").html("审核通过！");
  244. 				$(".glyphicon-remove#remove3").addClass("sr-only");
  245. 				$(".glyphicon-ok#ok3").removeClass("sr-only");
  246. 			}
  247. 		})
  248. 		//邮箱验证
  249. 		$("#email").keyup(function(){
  250. 			var email = $("#email").val();
  251. 			var reg2 = /[_a-zA-Z\d\-\.]+@[_a-zA-Z\d\-]+(\.[_a-zA-Z\d\-]+)+$/;
  252. 			if(!email || !reg2.test(email)){
  253. 				$("#inputGroupSuccess3Status4").removeClass("sr-only");
  254. 				$("#inputGroupSuccess3Status4").html("邮箱格式不正确！");
  255. 				$(".glyphicon-remove#remove4").removeClass("sr-only");
  256. 				$(".glyphicon-ok#ok4").addClass("sr-only");
  257. 			}else{
  258. 				$("#inputGroupSuccess3Status4").removeClass("sr-only");
  259. 				$("#inputGroupSuccess3Status4").html("审核通过！");
  260. 				$(".glyphicon-remove#remove4").addClass("sr-only");
  261. 				$(".glyphicon-ok#ok4").removeClass("sr-only");
  262. 			}
  263. 		})
  264. 		
  265. 		
  266. 		$("#validateBtn").click(function(){
  267. 			var username = $("#username").val();
  268. 			var tel  = $("#tel").val();
  269. 			var company = $("#company").val();
  270. 			var job  = $("#job").val();
  271. 			var email = $("#email").val();
  272. 			var aid = $("#aid").val();
  273. 			if(!aid || aid==null || aid==false){
  274. 				$("#myModal").modal();
  275. 				$(".modal-body p").html("非法数据ID");
  276. 			}
  277. 			if(!username){
  278. 				$("#inputGroupSuccess3Status0").removeClass("sr-only");
  279. 				$("#inputGroupSuccess3Status0").html("姓名不能为空！");
  280. 				$(".glyphicon-remove").removeClass("sr-only");
  281. 			}else{
  282. 				$("#inputGroupSuccess3Status0").removeClass("sr-only");
  283. 				$("#inputGroupSuccess3Status0").html("审核通过！");
  284. 				$(".glyphicon-ok").removeClass("sr-only");
  285. 			}
  286. 			
  287. 			var reg = /^0?(13[0-9]|17[0-9]|15[0123456789]|18[0123456789]|14[57])[0-9]{8}$/;
  288. 			if(!tel || !reg.test(tel)){
  289. 				$("#inputGroupSuccess3Status1").removeClass("sr-only");
  290. 				$("#inputGroupSuccess3Status1").html("手机号格式不正确！");
  291. 				$(".glyphicon-remove#remove1").removeClass("sr-only");
  292. 				$(".glyphicon-ok#ok1").addClass("sr-only");
  293. 			}else{
  294. 				$("#inputGroupSuccess3Status1").removeClass("sr-only");
  295. 				$("#inputGroupSuccess3Status1").html("审核通过！");
  296. 				$(".glyphicon-remove#remove1").addClass("sr-only");
  297. 				$(".glyphicon-ok#ok1").removeClass("sr-only");
  298. 			}
  299. 			
  300. 			if(!company){
  301. 				$("#inputGroupSuccess3Status2").removeClass("sr-only");
  302. 				$("#inputGroupSuccess3Status2").html("公司/单位不能为空！");
  303. 				$(".glyphicon-remove#remove2").removeClass("sr-only");
  304. 				$(".glyphicon-ok#ok2").addClass("sr-only");
  305. 			}else{
  306. 				$("#inputGroupSuccess3Status2").removeClass("sr-only");
  307. 				$("#inputGroupSuccess3Status2").html("审核通过！");
  308. 				$(".glyphicon-remove#remove2").addClass("sr-only");
  309. 				$(".glyphicon-ok#ok2").removeClass("sr-only");
  310. 			}
  311. 			
  312. 			if(!job){
  313. 				$("#inputGroupSuccess3Status3").removeClass("sr-only");
  314. 				$("#inputGroupSuccess3Status3").html("职位不能为空！");
  315. 				$(".glyphicon-remove#remove3").removeClass("sr-only");
  316. 				$(".glyphicon-ok#ok3").addClass("sr-only");
  317. 			}else{
  318. 				$("#inputGroupSuccess3Status3").removeClass("sr-only");
  319. 				$("#inputGroupSuccess3Status3").html("审核通过！");
  320. 				$(".glyphicon-remove#remove3").addClass("sr-only");
  321. 				$(".glyphicon-ok#ok3").removeClass("sr-only");
  322. 			}
  323. 			
  324. 			var reg2 = /[_a-zA-Z\d\-\.]+@[_a-zA-Z\d\-]+(\.[_a-zA-Z\d\-]+)+$/;
  325. 			if(!email || !reg2.test(email)){
  326. 				$("#inputGroupSuccess3Status4").removeClass("sr-only");
  327. 				$("#inputGroupSuccess3Status4").html("邮箱格式不正确！");
  328. 				$(".glyphicon-remove#remove4").removeClass("sr-only");
  329. 				$(".glyphicon-ok#ok4").addClass("sr-only");
  330. 			}else{
  331. 				$("#inputGroupSuccess3Status4").removeClass("sr-only");
  332. 				$("#inputGroupSuccess3Status4").html("审核通过！");
  333. 				$(".glyphicon-remove#remove4").addClass("sr-only");
  334. 				$(".glyphicon-ok#ok4").removeClass("sr-only");
  335. 			}
  336. 			if(!username || !tel || !reg.test(tel) || !company || !job || !email || !reg2.test(email)){
  337. 				$("#myModal").modal();
  338. 				$(".modal-body p").html("请完善信息！");
  339. 			}else{
  340. 				$.post("joinus",{'username':username,'tel':tel,'company':company,'job':job,'email':email},function(data){
  341. 					if(data.code=='200'){
  342. 						$("#myModal").modal();
  343. 						$(".modal-body p").html(data.msg);
  344. 						$("#quedingbtn").click(function(){location.reload()})
  345. 					}
  346. 					if(data.code=='201'){
  347. 						$("#myModal").modal();
  348. 						$(".modal-body p").html(data.msg);
  349. 						$("#quedingbtn").click(function(){location.reload()})
  350. 					}
  351. 					if(data.code=='300'){
  352. 						$("#myModal").modal();
  353. 						$(".modal-body p").html(data.msg);
  354. 						$("#quedingbtn").click(function(){location.reload()});//点击确定后 刷新页面
  355. 					}
  356. 					
  357. 					
  358. 				},'json')
  359. 			}
  360. 			//$("form").submit();
  361. 		})
  362. 	});
  363. 	
  364. 	
  365. </script>
  366.  
  367. </body>
  368. </html>

　　

　

 

 

 

其他示例： 

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap Modal</title>
  8.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9.     <style type="text/css">
  10.     @@media screen and (min-width: 768px) {
  11.     .modal-dialog {
  12.     right: auto;
  13.     left: 0%;
  14.     width: 600px;
  15.     padding-top: 30px;
  16.     padding-bottom: 30px;
  17.     }
  18.     .modal-content {
  19.     -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  20.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  21.     }
  22.     }
  23.     </style>></head>
  24. <body>
  25.     <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  26.         Launch demo modal
  27.     </button>
  28.  
  29.     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  30.         <div class="modal-dialog" role="document">
  31.             <div class="modal-content">
  32.                 <div class="modal-header">
  33.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  34.                         <span aria-hidden="true">×</span>
  35.                     </button>
  36.                     <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
  37.                 </div>
  38.                 <div class="modal-body">
  39.                     <p>您的操作不可逆</p>
  40.                 </div>
  41.                 <div class="modal-footer">
  42.                     <button type="button" data-dismiss="modal" class="btn">Close</button>
  43.                     <button type="button" class="btn btn-primary">Save</button>
  44.                 </div>
  45.             </div>
  46.         </div>
  47.     </div>
  48.  
  49.     <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  50.     <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  51. </body>
  52. </html>
  53. @*为 .modal 添加 role="dialog"，用于指定模态框为对话框。
  54. 为 .modal-dialog 添加 aria-hidden="true" 属性。
  55. 通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
  56. 关闭动画
  57. 如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。
  58.  
  59. 通过按钮属性显示不同内容
  60. 当有一堆按钮，都要触发相同的模态框(如：向好友列表中某个人发消息)，只是有用户ID不同，那么可以使用data-whatever配合event.relatedtarget来实现：
  61. [html] view plain copy
  62. <!DOCTYPE html>
  63. <html lang="zh-CN">
  64. <head>
  65.     <meta charset="utf-8">
  66.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  67.     <meta name="viewport" content="width=device-width, initial-scale=1">
  68.     <title>Bootstrap Modal</title>
  69.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  70. </head>
  71. <body>
  72.  
  73.  
  74.     <div class="panel panel-default">
  75.         <div class="panel-heading">好友列表</div>
  76.         <div class="panel-body">
  77.             <div class="list-group" role="group" aria-label="好友列表">
  78.                 <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  79.                         data-whatever="张三">
  80.                     张三
  81.                 </button>
  82.                 <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  83.                         data-whatever="李四">
  84.                     李四
  85.                 </button>
  86.                 <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
  87.                         data-whatever="王二">
  88.                     王二
  89.                 </button>
  90.             </div>
  91.         </div>
  92.     </div>
  93.  
  94.     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  95.         <div class="modal-dialog" role="document">
  96.             <div class="modal-content">
  97.                 <div class="modal-header">
  98.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  99.                         <span aria-hidden="true">×</span>
  100.                     </button>
  101.                     <h4 class="modal-title" id="exampleModalLabel">New message</h4>
  102.                 </div>
  103.                 <div class="modal-body">
  104.                     <form>
  105.                         <div class="form-group">
  106.                             <label for="recipient-name" class="control-label">Recipient:</label>
  107.                             <input type="text" class="form-control" id="recipient-name">
  108.                         </div>
  109.                         <div class="form-group">
  110.                             <label for="message-text" class="control-label">Message:</label>
  111.                             <textarea class="form-control" id="message-text"></textarea>
  112.                         </div>
  113.                     </form>
  114.                 </div>
  115.                 <div class="modal-footer">
  116.                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  117.                     <button type="button" class="btn btn-primary">Send message</button>
  118.                 </div>
  119.             </div>
  120.         </div>
  121.     </div>
  122.     <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  123.     <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  124.     <script>
  125.         $('#exampleModal').on('show.bs.modal', function (event) {
  126.             var button = $(event.relatedTarget) // 触发事件的按钮
  127.             var recipient = button.data('whatever') // 解析出data-whatever内容
  128.             var modal = $(this)
  129.             modal.find('.modal-title').text('Message To ' + recipient)
  130.             modal.find('.modal-body input').val(recipient)
  131.         })
  132.     </script>
  133. </body>
  134. </html>*@

　　

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号