我正在尝试使用bootBox模式创建一个bootstrap弹出窗口,在form中有一个带有屏蔽输入的输入文本,但弹出窗口内的任何事件都不起作用.
见:http://jsfiddle.net/ens1z/UK6x5/5/
html:
<p>The mask input below WORKS great</p>
<p>
<input type="text" class="mask" />
</p>
<a href="#" class="btn btn-inverse" id="asssf">OPEN BOOTBox</a>
<div id="frm" style="visibility: hidden">
<div class="form-horizontal">
<p>The mask input below DON´T WORK. :-(</p>
<input type="text" class="mask"/>
</div>
</div>
JavaScript的:
$("#asssf").click(function (e) {
e.preventDefault();
bootBox.dialog({
message: $("#frm").html(),
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-danger",
callback: function() {
return;
}
}
}
});
$(".mask").mask("999-99-9999",{placeholder:"_"});
});
$(".mask").mask("999-99-9999",{placeholder:"_"});
如何掩盖弹出窗口内的作品?
谢谢,
解决方法:
试试这个小提琴:) HERE
问题是您在没有事件的情况下将html加载到bootBox.
function BootBoxContent(){
var content = $("#frm").clone(true);
$(content).css('visibility','visible');
content.find('.mask').mask("999-99-9999",{placeholder:"_"});
return content ;
}
bootBox.dialog({
message: $("#frm").clone(true).css('visibility','visible').find('.mask').mask("999-99-9999",{placeholder:"_"}),
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-danger",
callback: function() {
return;
}
}
}
});
});