[英]My modal wont close after I print the modal content
My modal wont close after I print the modal body but the create button and print button still works after I print content still can anyone help me?打印模态正文后,我的模态不会关闭,但创建按钮和打印按钮在我打印内容后仍然有效,有人可以帮助我吗?
here is my modal code that contains the data to be printed这是我的模式代码,其中包含要打印的数据
<div class="modal fade" id="create" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" padding="5px !important">
<!--/id for printing "div1" -->
<div class="modal-content" >
<div class="modal-header">
<strong>
<h4 class="modal-title">Create New User</h4>
</strong>
</div>
<div class="modal-body"id="div1">
<form method="POST" action="../process/create_new_user.php">
<div class="form-group">
<label for="exampleInputName2" >User Name</label>
<input type="text" class="form-control" id="exampleInputName2" pattern="^[a-zA-Z ]+$" title="Letters Only" placeholder="Student Name" NAME="newusername" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" NAME="newuserpass" required>
</div>
<div class="checkbox text-right">
<label for="accounttype">Account Type</label>
<select name="securitylvl" id="accounttype" required>
<option value="" selected></option>
<option value="student">Student</option>
<option value="faculty">Faculty</option>
<option value="admin">Admin</option>
<option value="accounting">Accounting</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" onclick="printContent('div1')">Print Content</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="Submit" class="btn btn-primary">Create</button>
</div>
</form>
</div>
</div>
</div>
</div>
here is my script I use to print the content这是我用来打印内容的脚本
<script>
function printContent(el){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
</script>
The code below simply clone the element you want to print and drop it inside a new div with ID called PrintSection.下面的代码只是简单地克隆您要打印的元素并将其放入 ID 为 PrintSection 的新 div 中。 Note its not necessary for you to create a div with id of PrintSection as the JS code is design to handle the create authomatically请注意,您不必创建一个 ID 为 PrintSection 的 div,因为 JS 代码旨在自动处理创建
css for the new div PrintSection新 div PrintSection 的 css
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
Js to handle the cloning and hiding of other elements js处理其他元素的克隆和隐藏
function printDiv(divName) {
var elem = document.getElementById(divName)
var domClone = divName.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.style = "width: 100%;";
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}
I know this is a year plus old but in the script function instead of我知道这是一岁多,但在脚本函数中而不是
document.body.innerHTML = restorepage;
try尝试
location.reload(true);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.