[英]Close Modal after Submit button / Count all the values of checked checkbox
我是php,html5和CSS的新手。 希望你能幫助我解決我的問題。
我使用CSS設置樣式。 這是我的代碼:
<form method="post" name="testform" action="">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" name="test" placeholder="test" value="">
</a>
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
這是我的CSS代碼。
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
我的問題是,當我單擊提交時,它不會關閉模式。 我嘗試在父窗口上重定向它,但是沒有任何反應,它沒有關閉。
關於如何計算使用PHP檢查的復選框數量,我還有另一個問題。 如果選中了1個復選框,它將顯示它的值;如果選中了2個以上,它將回顯一個值“ MORE”
希望任何人都可以幫助我。 如果我的信息還不夠,請告訴我,以便我進行更新。 我想了解更多。 提前致謝。
要打開和關閉模態,您必須使用JS。 我建議你使用jQuery庫(看看這個文章,以了解如何在您的JS使用jQuery)。 這樣,您可以簡單地使用.fadeOut()關閉模態:
$("#idofyourbutton").click(function(){ $("#idofyourmodal").fadeOut(); });
要計算所有選中的復選框,可以使用以下方法:
var l = $("input[type='checkbox']:checked").length;
之后,您可以使用if else
方式設置輸入字段的內容。
確保您實際上遵循Bootstrap模態的正確html格式。 注意數據和角色屬性。 注意關閉模式的按鈕如何具有這些屬性。
<div class="modal fade" tabindex="-1" role="dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.