在使用Bootbox+JQuery datepicker时,发现点击输入框,并不是被div层遮住了,而是根本就没有触发这个显示日期的事件,且无错误提示信息。
情况是这样的:
1.html代码:
这个也就是我们的弹出层。
<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代码:
使用bootbox,自定义弹出层的信息,这里就是这个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.界面,如图所示:
我们发现点击user_birthday下面的输入框,根本没有反应。
后面经过查询资料,发现一个类似问题的解决方案:
点击这里
在此基础上修改,后面就解决了这个问题。
方法如下:
1.JS代码:
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.结果:可以看到点击之后能够出现时间框了。