如何避免JQuery Pop Up窗口覆盖整个屏幕宽度？

Question

我正在尝试使用插件插入JQuery弹出窗口。 虽然，它工作正常，但是只要显示弹出窗口，它就会覆盖整个屏幕宽度。 高度可以，但宽度可以覆盖整个屏幕。 我尝试使用插件文档中提供的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（）方法。

Answer 1

按照jquery-confirm插件的文档（ https://craftpip.github.io/jquery-confirm/#custom-width-without-bootstrap ），要设置customWidth选项，还必须设置useBootstrap: false 。