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实现拖动示例代码
Nov 01 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
javascript实现拖放效果
Dec 16 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
Javascript原生ajax请求代码实例
Feb 20 Javascript
canvas绘制折线路径动画实现
May 12 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
javascript实现密码验证
2015/11/10 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
详解vue-cli3使用
2018/08/14 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python2随机数列生成器简单实例
2017/09/04 Python
TensorFlow实现Logistic回归
2018/09/07 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Django框架 querySet功能解析
2019/09/04 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
银行求职信个人范文
2013/12/16 职场文书
出国留学介绍信
2014/01/13 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2015学校年度工作总结
2015/05/11 职场文书
工作会议简报
2015/07/20 职场文书
2016大一新生军训感言
2015/12/08 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS