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

来源：互联网发布：linux home扩容编辑：程序博客网时间：2024/06/14 23:59

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>

阅读全文

0 0