When using Bootbox+JQuery datepicker, I found that clicking the input box was not hidden by the div layer, but the date display event was not triggered at all, and there was no error message.
The situation is like this: 1.
html code:
this is our pop-up layer.
<div id="formDiv" class="form-group form">
<form id="addForm" class="cmxform">
<div class="form-table">
<div class="form-row">
<label>user_name</label> <input id="username" name="username"
type="text" class="form-control form-input" placeholder="name" />
</div>
<div class="form-row">
<label>user_gender</label> <input id="male" type="radio"
value="male" name="userGender" required>male <input
id="female" type="radio" value="female" name="userGender">female
<label for="userGender" class="error"></label>
</div>
<div class="form-row">
<label>user_email</label> <input id="userEmail" name="userEmail"
type="email" class="form-control form-input"
placeholder="user_email" />
</div>
<div class="form-row">
<label>user_phone</label> <input id="userPhone" name="userPhone"
type="text" class="form-control form-input"
placeholder="user_phone" />
</div>
<div class="form-row">
<label>user_address</label> <input id="userAddress"
name="userAddress" type="text" class="form-control form-input"
placeholder="user_address" />
</div>
<div class="form-row">
<label>user_birthday</label> <input name="userBirthday" type="text"
class="form-control datepicker" />
</div>
<div class="form-row">
<label>role_name</label> <select class="form-control form-select"
id="roleName">
<option value="1">总经理</option>
<option value="2">副总经理</option>
<option value="3">组长</option>
<option value="4">普通员工</option>
</select>
</div>
<div class="form-row">
<label>departemnt_name</label> <select
class="form-control form-select" id="departemntName">
<option value="1">研发</option>
<option value="2">IT部</option>
<option value="3">HR</option>
<option value="4">销售</option>
</select>
</div>
</div>
</form>
</div>2.JS code:
use bootbox to customize the information of the pop-up layer, here is this form
function addUser() {
bootbox.confirm({
message:$("#formDiv").html(),
title:"Add new user",
buttons:{
confirm:{label:"Yes"},
cancel:{label:"No"}
},
callback:function(result){
if(result) {
console.log("You have clicked yes");
}
}
});
}3. The interface, as shown in the figure:
we found that clicking the input box under user_birthday, there is no response at all.
After searching for information, I found a solution to a similar problem:
Click here
to modify on this basis, and the problem will be solved later.
The method is as follows:
1. JS code:
function addUser() {
bootbox.confirm({
message:bootBoxContent(),
title:"Add new user",
buttons:{
confirm:{label:"Yes"},
cancel:{label:"No"}
},
callback:function(result){
if(result) {
console.log("You have clicked yes");
}
}
});
}
//添加这个方法取代$("#formDiv").html()
function bootBoxContent() {
var content = $("#formDiv").clone();
//因为在css代码做了隐藏，这里需要显示出来
$(content).show();
//不能使用id选择器，因为clone的原因，会出现2个相同的id，导致datepicker插件不识别报错，所以用类选择器
content.find(".datepicker").datepicker();
return content;
}2. Result: You can see that the time frame appears after clicking.
