使用 jAlert 作为一个简单的提示

Question

我满意地使用了可用的库 jAlert v4 here

但我注意到无法使用此库，例如简单的 "prompt"（这是一个带有文本框的简单警报），如以下代码所示：

 var qnt = prompt("Insert")

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

所以我想知道是否可以为我的目的使用相同的库 (jAlert v4)，因为我喜欢 jalert 自定义（例如主题和动画）并且它非常易于使用。我想保持与我的 jAlert 相同的样式，如下图所示：jAlert example 但带有输入文本框。

Answer 1

是的，你可以。如果只是把输入框放到内容里，那是不会出现的，没错。这就是为什么你有 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 2

该库正在覆盖浏览器的内置 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 3

浏览器对话框内容，例如 alert、confirm 和 prompt 都是阻塞的。 JavaScript 像运行.

那样执行停止

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

对于某些事情，例如 alert，这可能不是问题.. 如果代码继续显示警报，但如果您尝试连续显示多个警报，它就会崩溃.

但是，对于 prompt 和 confirm，您将必须重构您的代码。

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

也许值得查看这个库： http://alertifyjs.com/

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 作为一个简单的提示

Using jAlert as a simple Prompt

javascript

jquery

alert

prompt