点击按钮弹出模态窗,并向模态窗传值

环境:
springboot2.2.5
thymeleaf 3.0.11

点击button按钮,弹出模态窗,并传值

<button class="btn btn-sm btn-danger"
data-toggle="modal" data-target="#myModal"
th:onclick="'Valuess(' + ${leimu.leimuId} + ');'">
删除
button>

这里一定要注意,th:onclick向js函数传值的形式!!
js:

<script>
		<!--向模态弹窗传值-->
		function Valuess (leimuId) {
     
		    console.log("valuesssssss");
			$("#delLeimuId").val(leimuId);
           }
</script>

模态窗html


<form method="post" action="" class="form-horizontal" role="form" name="form_modal" style="margin: 20px;">

	
    <input type="hidden" name="_method" value="delete">
    
    <div class="modal fade" id="myModal" data-backdrop="static" th:tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel">提醒h5>
                    <button th:type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×span>
                    button>
                div>
                <div class="modal-body" id="modalContent">
                    
                    <input type="hidden" id="delLeimuId" name="delLeimuId" value="">

                    <p>您是否要安全删除?p>
                    <p>是,保存相应菜品;否,删除相应菜品p>
                div>
                <div class="modal-footer">
                    <button  class="btn btn-secondary " name="allDelBtn" onclick="allDel();">button>
                    <button  class="btn btn-primary " name="safeDelBtn" onclick="safeDel();">button>
                div>

            div>
        div>
    div>
form>

模态弹窗两个提交按钮,分别提交到不同页面

<script>
 function allDel () {
     
     var id = document.form_modal.delLeimuId.value;
     //all删除当前类目
     document.form_modal.action = "/leimu/allDel/"+id;
     document.form_modal.submit();
     // $("#deleBtnForm").attr("action","/leimu/allDel/"+id).submit();
     // return false;
 }

 function safeDel () {
     
     var id = document.form_modal.delLeimuId.value;
     document.form_modal.action = "/leimu/safeDel/"+id;
     document.form_modal.submit();
     //安全删除当前类目
     // $("#deleBtnForm").attr("action", "/leimu/safeDel/" + id).submit();
     // return false;
 }

</script>

你可能感兴趣的:(thymeleaf,javascript,javascript)