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

Question

我正在尝试使用插件插入 JQuery 弹出窗口。虽然，它工作正常，但每当弹出窗口显示时，它会覆盖整个屏幕宽度。高度很好，但宽度覆盖了整个屏幕。 我尝试使用插件文档中给出的宽度属性，但同样不起作用，而其余属性按预期工作。

以下是示例代码。

   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。