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


Posted in Javascript onSeptember 19, 2016

近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息。其实这种弹出窗口有很多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模态框调用功能实现方法

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

Javascript 相关文章推荐
javascript 使td内容不换行不撑开
Nov 29 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
javascript实现的上下无缝滚动效果
Sep 19 #Javascript
Angular ng-class详解及实例代码
Sep 19 #Javascript
javascript实现的左右无缝滚动效果
Sep 19 #Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 #Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 #Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 #Javascript
javascript this详细介绍
Sep 19 #Javascript
You might like
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
简明json介绍
2008/09/28 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
蛋白质世界:Protein World
2017/11/23 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
幼儿园安全责任书范本
2014/07/24 职场文书
2014年工商所工作总结
2014/12/09 职场文书
小学运动会入场口号
2015/12/24 职场文书
Python竟然能剪辑视频
2021/05/25 Python