Question

我满意地使用了库jAlert v4 here

但我注意到无法使用此库，例如简单的“提示”（即带文本框的简单警报），如以下代码所示：

 var qnt = prompt("Insert")

此库也非常出色，因为它可以自动识别我的代码中的所有“alert（）”函数并应用他的样式而无需任何进一步的实现（它只需要在<head>标记内添加它的库）。我发现我的目的还有“jQuery Alert Dialogs”库，但它不能像jAlert v4那样自定义。

所以我想知道是否有可能为我的目的使用相同的库（jAlert v4），因为我喜欢jalert自定义（例如主题和动画）并且它非常容易使用。我希望保持像我的jAlert一样的风格如下图所示：jAlert example 但是输入TextBox。

Answer 1

浏览器对话框内容，例如alert，confirm和prompt都是阻止的。 JavaScript执行在运行时停止。

根本无法在外部代码中重现该行为，这意味着必须使用回调。

对于某些内容，例如alert，它可能不是问题..如果代码在警报仍然显示时继续，但如果您尝试连续显示多个警报，它将会崩溃。 / p>

但对于prompt和confirm，您将重新构建代码。

我快速阅读了jAlert个文档，我看到了alert和confirm - 他们似乎没有替换prompt ，所以我无法显示他们的演示代码

可能值得查看这个库： http://alertifyjs.com/

Answer 2

是的，你可以。如果您只是将输入框放入内容中，那么就不会出现，这是真的。这就是你有onOpen回调的原因：

 $.alertOnClick('.getTopClose', {
    'title':'Textbox example',
    'content':'', //Add nothing to the content
    'onOpen': function(alert){
       //This is the important part!
       //Append a text input to the class .ja_body
       $('.ja_body').append('<input type="text" name="something" value="" />'); 
    }
});

Answer 3

该库正在覆盖浏览器的内置alert()功能。您可以对prompt()执行相同操作，并打开带有文本框的jAlert。

window.prompt = function(title, value){
    $.jAlert({
        # Add an input field
        'content': '<form><label>'+title+'</label><input value="'+(value||'')+'"></form>'
        # Add the buttons or whatever else you need to the jAlert
    });
};

Answer 4

我找到了解决问题的方法。而这只是因为总是使用相同的jalert库。在我的原因中，我使用警报的返回值通过ajax执行更新。这是我的代码：

    $.jAlert({
    'title': 'Inserimento numero colli',
    'content': '<form style="text-align:center;"><label>Quantita</label><br><input id="id_qnt" type="text" style="text-align:center"></form>',
    'btns': [
        {
            'text': 'Save',
            'closeAlert': 'false',
            'onClick': function (e, btn) {
                var item = btn.parents('.jAlert'),
                    form = item.find('form'),
                    error = false;
                var field = form.find('input:text').val();
                if (field == 'undefined' || field == '') {
                    error = "Empty quantity!";
                }
                if (!($.isNumeric(field))) {
                    error = "IsNan!"
                }
                if (field < 0) {
                    error = "IT'S < 0"
                }
                if (error) {
                    errorAlert(error);
                    return false;
                }

                // 'field' is the returned value... such as when using 'prompt'
                // In my case I use it for AJAX 

                var obj = {};
                obj.value = field;

                $.ajax({
                    type: "POST",
                    url: "Master.aspx/UpdateItem",
                    data: JSON.stringify(obj),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        successAlert('SUCCESSFULLY SENT!', r.d);
                    }
                });

                // DYNAMICALLY CHANGE VALUE INSIDE PAGE change clicked_id by passing your id 
                document.getElementById(clicked_id).textContent = obj.value;
            }
        },
        {
            'text': 'Cancel'
        }
    ]
});

看起来像screenshot 我希望对大家有所帮助！

使用jAlert作为简单的提示

4 个答案: