1. 首页
  2. 编程与技术

Bootstrap模态框调用功能实现方法

发布于 2017-06-09 11:55:14 | 125 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap v3教程，程序狗速度看过来！

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

这篇文章主要介绍了Bootstrap模态框调用功能实现方法的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧

近在做一个项目时需要在页面中嵌入弹出窗口，用来展示表单信息。其实这种弹出窗口有很多jquery插件都可以实现，我这边前端都是用Bootstrap的，正好Bootstrap有模态框这个功能，这下就可以直接拿它实现了。

实现步骤如下：

在前端页面引入bootstrap相关的css和js文件


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
<script type='text/javascript' src='../public/js/jquery-1.8.2.min.js'></script> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script> 
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>

然后在html中创建一个button用来点击触发弹出窗口，这里是调用f_show函数并传入一个参数向后端发起Ajax请求，Ajax处理请求后返回前端并输出到模态框。


<td><button type="button" data-toggle="modal" data-target="#myModal" onclick="f_show('<?php echo $row['service_tag'];?>');" ><?php echo $row['service_type'];?></button></td>

Ajax处理请求


<script> 
function f_show(tags){ 
$.ajax({ 
type:"POST", 
url:"service_info_ajax.php", 
data: {"tags":tags}, 
dataType:'json', 
success: function(data){ 
if(data.state == '1'){ 
$("#service_key").val(data.service_key); 
$("#service_comments").val(data.service_comments); 
$("#service_help").val(data.service_help); 
$("#service_target").val(data.service_target); 
$("#service_mail").val(data.service_mail); 
$("#service_mailpass").val(data.service_mailpass); 
$("#service_date").val(data.service_date); 
if(data.service_type <= '2'){ 
document.getElementById("remark1").style.display = "none";
document.getElementById("remark2").style.display = "none";
document.getElementById("notes1").style.display = ""; 
document.getElementById("notes2").style.display = ""; 
$("#notes2").text(data.service_notes); 
}else{ 
document.getElementById("notes1").style.display = "none"; 
document.getElementById("notes2").style.display = "none"; 
document.getElementById("remark1").style.display = ""; 
document.getElementById("remark2").style.display = ""; 
$("#remark2").text(data.service_remark); 
} 
} 
}, 
}); 
} 
$('#myModal').modal(options); 
</script>

后端处理返回


<?php
require_once("../db.class.php");
require_once("../common.class.php");
require_once("../mailtmp.class.php");
require_once("../admin.class.php");
$obj_comm = new Comm();
$obj_mail = new mailtemplate();
$obj_admin = new AdminSub();
$tags = trim($_POST['tags']);
#$tags = "1643e0cb3d6078a9a0fd86c8239cd4c1";
$tag_arr = $obj_admin->find_service_tag($tags,$db);
if($tag_arr){
$tag_arr['state'] = 1;
echo json_encode($tag_arr);
}
?>

前端模态框页面展示


<!--模态框开始--><div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Service</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="uk-form-row">
<div class="uk-form-controls">
<label for="form-username" class="uk-form-label" style="display:inline-block;padding: 0 10px;vertical-align: middle;margin-left:-7px;">研究关键字</label>
<input class="" id="service_key" value="<?php echo $ids;?>" readonly="readonly" style="margin-left: 5px;width:400px;height:30px;" type="text" name="service_help" placeholder="">
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls"> <label for="form-username" class="uk-form-label" style="display:inline-block;padding: 0 10px;vertical-align: middle;margin-left:7px;">评审意见</label>
<input class="" id="service_comments" readonly="readonly" style="margin-left: 5px;width:400px;height:30px;" type="text" name="service_help" placeholder=""> </div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls">
<label for="form-username" class="uk-form-label" style="display:inline-block;padding: 0 10px;vertical-align: middle;margin-left:7px;">帮助选刊</label>
<input class="" id="service_help" readonly="readonly" style="margin-left: 5px;width:400px;height:30px;" type="text" name="service_help" placeholder="">
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls">
<label for="form-username" class="uk-form-label" style="display:inline-block;padding: 0 10px;vertical-align: middle;margin-left:7px;">投稿服务</label>
<input class="" id="service_target" readonly="readonly" style="margin-left: 5px;width:400px;height:30px;" type="text" name="service_help" placeholder="">
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls">
<label for="form-username" class="uk-form-label" style="display:inline-block;padding: 0 10px;vertical-align: middle;margin-left:7px;">投稿邮箱</label>
<input class="" id="service_mail" readonly="readonly" style="margin-left:5px;width:400px;height:30px;" type="text" name="service_help" placeholder="">
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls">
<label for="form-username" class="uk-form-label" style="display:inline-block;padding: 0 10px;vertical-align: middle;margin-left:7px;">邮箱密码</label>
<input class="" id="service_mailpass" readonly="readonly" style="margin-left: 5px;width:400px;height:30px;" type="text" name="service_help" placeholder="">
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-controls">
<label for="form-username" class="uk-form-label" style="display:inline-block;padding: 0 10px;vertical-align: middle;margin-left:7px;">投稿加急</label>
<input class="" id="service_date" readonly="readonly" style="margin-left: 5px;width:400px;height:30px;" type="text" name="service_help" placeholder="">
</div>
</div>
<div class="uk-form-row" style="display:inline-block;">
<div class="uk-form-controls">
<label for="form-username" id="notes1" class="uk-form-label" style="display:none;padding: 0 10px;vertical-align: middle;margin-left:7px;margin-top:-150px;">改写需求</label>
<textarea cols="20" rows="3" readonly="readonly" style="display:none;margin-left: 5px;px; height: 100px; width: 400px;" name="service_notes" id="notes2" placeholder=""></textarea>
<label for="form-username" id="remark1" class="uk-form-label" style="display:none;padding: 0 10px;vertical-align: middle;margin-left:7px;margin-top:-150px;">投稿备注</label>
<textarea cols="20" rows="3" readonly="readonly" style="display:none;margin-left: 5px;px; height: 100px; width: 400px;" name="service_notes" id="remark2" placeholder=""></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束-->

实现效果如图：

以上所述是小编给大家介绍的Bootstrap模态框调用功能实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phperz网站的支持！



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务