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 相关文章推荐
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 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防注入代码
2010/04/07 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
python实现Zabbix-API监控
2018/09/17 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
小学校本培训方案
2014/06/06 职场文书
机关职员工作检讨书
2014/10/23 职场文书
初中毕业生自我评价
2015/03/02 职场文书
就业推荐表院系意见
2015/06/05 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
python基础之文件操作
2021/10/24 Python