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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
小程序如何使用分包加载的实现方法
May 22 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使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
php图片裁剪函数
2018/10/31 PHP
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python如何更新包
2020/06/11 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python time()的实例用法
2020/11/03 Python
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
实习自我评价怎么写
2013/12/02 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
大学生创业策划书
2014/02/02 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
社区交通安全实施方案
2014/03/22 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
三严三实心得体会范文
2014/10/13 职场文书
先进集体申报材料
2014/12/25 职场文书
银行自荐信范文
2015/03/25 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
2016继续教育研修日志
2015/11/13 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
浅谈Python numpy创建空数组的问题
2021/05/25 Python