模态窗口参数

Nuria_Niu

已于 2023-06-16 10:06:53 修改

阅读量88

点赞数

文章标签：前端

于 2023-06-08 13:41:10 首次发布

<!--  没有参数可以去掉onclick 方法 ， data-target="#exampleModal" 本身设置了点击按钮打开模态窗口  -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" th:onclick="addModalParam([[${parm1}]],[[${parm1}]],this)" >modal</button>

    <!-- Modal -->

<!--tasknumber-->
<input type="hidden" id="param1"/>
<!--batchname-->
<input type="hidden" id="param2"/>
<!--obj-->
<input type="hidden" id="param3" />
    <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">If you need to rerun this policy?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="msg"></p>
            </div>
            <div class="modal-footer">
                <button type="button" id="cancelBtn" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" id="confirmBtn" class="btn btn-primary">confirm</button>
            </div>
        </div>
    </div>
</div>

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript"
            src="../bootstrap-3.4.1-dist/js/jquery-3.6.0.js"></script>
    <link  href="../bootstrap-4.6.2-dist/css/bootstrap.min.css"
           rel="stylesheet">
    <script  src="../bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="../bootstrap-4.6.2-dist/js/jquery-3.6.0.js"></script>
    <style type="text/css">body{zoom:0.8;}</style>

  <script>
  window.onload=function(){
         $('#confirmBtn').on('click', function() {
            var tasknumber = $("#param1").val();
            var batchname = $("#param2").val();
            var obj = $("#param3").val();
            if(tasknumber=='' || batchname =='' ){
                alert("taskNumber is null , can not rerun");
                $("#cancelBtn").click();
            }else{
                rerun(tasknumber,batchname,obj);
                $("#cancelBtn").click();
                $('#msg').html("");
                $("#param1").attr("value",'');
                $("#param2").attr("value",'');
                $("#param3").attr("value",'');
            }
        });
    }



// 给modal 传参
 function passModalParam(tasknumber,batchname,obj){
        if(taskNumber==null){
             alert("taskNumber is null , can not rerun");
        }
        $("#param1").val(tasknumber);
        $("#param2").val(batchname);
        $("#param3").val(obj);
        $('#msg').html("taskNumber : "+ $("#param1").val());
    }