您的位置:首页 > Web前端 > BootStrap

HTML接收后台参数,通过JS传递给Bootstrap模态框

2017-11-15 14:41 549 查看
1、接收后台传递来的变量

<input type="hidden" name="getid" id="getid" value="{$id}" />
<input type="hidden" name="getdepid" id="getdepid" value="{$depid}" />2、主要就是点击这个button弹出模态框,触发onclick函数,JS获取参数,传递到模态框中
<button class="btn" data-toggle="modal" data-target="#myModal" onclick="transmit()" >不通过</button>3、模态框(Modal)
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">
请说明不通过原因
</h4>
</div>
<form action="__URL__/disagree" method="POST">
<div class="modal-body" align="center">
<input type="text" name="remark" placeholder="请输入" style="width:520px; height:45px;" />

<input type="hidden" name="id" id="id" value="" />
<input type="hidden" name="depid" id="depid" value="" />

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消
</button>
<button type="submit" class="btn btn-primary">
确定
</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>4、JS获取参数,传递到模态框中
<script type="text/javascript">
$("#myModal").modal("hide");//加载页面首先隐藏模态框,指向模态框的ID
function transmit(){
$("#myModal").modal("show");//显示模态框
var id = document.getElementById("getid").value; //获取所需传递的参数id
var depid = document.getElementById("getdepid").value; //获取所需传递的参数depid

//向模态框中传值
$('#id').val(id);
$('#depid').val(depid);
}
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐