如何避免 JQuery Pop Up window 覆盖整个屏幕宽度?
How to avoid JQuery Pop Up window to cover the whole screen width?
我正在尝试使用插件插入 JQuery pop window。虽然,它工作正常,但每当显示弹出窗口 window 时,它都会覆盖整个屏幕宽度。高度很好,但宽度覆盖了整个屏幕。
我尝试使用插件文档中给出的 width 属性,但同样不起作用,而其余属性按预期工作。
下面是示例代码。
function shw(){
$.confirm({
boxWidth: '30%',
animation: 'Rotate',
title: 'Prompt!',
content: '' +
'<form action="" class="formName">' +
'<div class="form-group">' +
'<label>Enter something here</label>' +
'<input type="text" placeholder="Your name" class="name form-control" required />' +
'</div>' +
'</form>',
buttons: {
formSubmit: {
text: 'Submit',
btnClass: 'btn-blue',
action: function () {
var name = this.$content.find('.name').val();
if(!name){
$.alert('provide a valid name');
return false;
}
$.alert('Your name is ' + name);
}
},
cancel: function () {
//close
},
},
onContentReady: function () {
// bind to events
var jc = this;
this.$content.find('form').on('submit', function (e) {
// if the user submits the form by pressing enter in the field.
e.preventDefault();
jc.$$formSubmit.trigger('click'); // reference the button and click it
});
}
});
}
这里方法 shw() 是在按钮单击事件上调用的。
根据 jquery-confirm
插件 (https://craftpip.github.io/jquery-confirm/#custom-width-without-bootstrap) 的文档,要设置 customWidth
选项,您还必须设置 useBootstrap: false
.
我正在尝试使用插件插入 JQuery pop window。虽然,它工作正常,但每当显示弹出窗口 window 时,它都会覆盖整个屏幕宽度。高度很好,但宽度覆盖了整个屏幕。 我尝试使用插件文档中给出的 width 属性,但同样不起作用,而其余属性按预期工作。
下面是示例代码。
function shw(){
$.confirm({
boxWidth: '30%',
animation: 'Rotate',
title: 'Prompt!',
content: '' +
'<form action="" class="formName">' +
'<div class="form-group">' +
'<label>Enter something here</label>' +
'<input type="text" placeholder="Your name" class="name form-control" required />' +
'</div>' +
'</form>',
buttons: {
formSubmit: {
text: 'Submit',
btnClass: 'btn-blue',
action: function () {
var name = this.$content.find('.name').val();
if(!name){
$.alert('provide a valid name');
return false;
}
$.alert('Your name is ' + name);
}
},
cancel: function () {
//close
},
},
onContentReady: function () {
// bind to events
var jc = this;
this.$content.find('form').on('submit', function (e) {
// if the user submits the form by pressing enter in the field.
e.preventDefault();
jc.$$formSubmit.trigger('click'); // reference the button and click it
});
}
});
}
这里方法 shw() 是在按钮单击事件上调用的。
根据 jquery-confirm
插件 (https://craftpip.github.io/jquery-confirm/#custom-width-without-bootstrap) 的文档,要设置 customWidth
选项,您还必须设置 useBootstrap: false
.