[英]Close/Hide Modal
Im having a hard time how to close or hide my modal after filling it up. 我在填充模型后很难关闭或隐藏我的模态。
Upon clicking submit i want it to go back to the page where the textbox is clickable. 单击提交后,我希望它返回可单击文本框的页面。 Once go back to the page, the checkbox i check should still checked when i open it again.
返回页面后,当我再次打开它时,我选中的复选框仍应选中。 Can anyone do it with javascript thing or any other solution.
任何人都可以使用javascript东西或任何其他解决方案来做到这一点。
I don't have time now to use bootstrap and my codes are below. 我现在没有时间使用引导程序,下面是我的代码。 i just want to hide my modal or close upon clicking submit.
我只想隐藏我的模式或在单击提交时关闭。 Help me please, thanks.
请帮助我,谢谢。
My working fiddle: https://jsfiddle.net/fe73awsu/ 我的工作提琴: https : //jsfiddle.net/fe73awsu/
Please see my code below: 请在下面查看我的代码:
test.php test.php
<form method="post" name="testform" action="#">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input readonly type="text" name="txt1" placeholder="inputTest">
</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">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div> <!-- close modalcol1 -->
</div> <!-- close modalcontainer -->
<div class="overlay"></div>
</div> <!-- close modalwrapper -->
</form>
modal.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 */
Help me guys, please :( i need it badly now. 请帮助我,:(我现在非常需要它。
<button type="button" id="close"class="btn green btn-default" data-dismiss="modal">Close <i class="fa fa-times" aria-hidden="true"></i></button>
Add JavaScript 添加JavaScript
function onSave(){
$('#close').Click();
}
try this. 尝试这个。
<button class="btn1" type="button" value="Submit" on-click= submit();>Submit</button>
// Script //脚本
function submit() {
window.history.back();
}
$(document).on("click",".btn1", function(){ $('#modal').hide(); });
/* 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 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" name="testform" action=""> <a href="#modal"> <!-- when the input textbox was clicked, modal will pop up --> <input readonly type="text" name="txt1" placeholder="inputTest"> </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"> <button class="btn1" type="button" value="Submit">Submit</button> </div> </div> <!-- close modalcol1 --> </div> <!-- close modalcontainer --> <div class="overlay"></div> </div> <!-- close modalwrapper --> </form>
Put this in file. 将此文件。
$('#modal_edit').modal('hide'); $('#modal_edit')。modal('hide');
is hope help kubb. 希望对库伯有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.