jquery-weui两个输入框

使用jQuery实现双输入框提示框

最新推荐文章于 2025-09-02 09:38:53 发布

原创最新推荐文章于 2025-09-02 09:38:53 发布 · 6.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #weui弹窗

前端开发专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用jQuery创建的自定义弹窗功能，该功能能够显示带有两个输入框的提示对话框，用于收集用户的输入信息。对话框包括标题、描述文本及两个输入字段，并提供了确认和取消按钮。

/**
 * Created by wxf on 2017/3/15.
 */
$(document).ready(function () {

});

//<button onclick="alertTwoInput('测试描述','标题','请输入name','请输入pass','取消','确定');">测试</button>
function alertTwoInput(text, title, input1, input2, onCancel, onOK) {
    var config;
    if (typeof text === 'object') {
        config = text;
    } else {
        config = {
            text: text,
            title: title,
            input1: input1,
            input2: input2,
            onOK: onOK,
            onCancel: onCancel,
            empty: false  //allow empty
        };
    }
    $.modal({
        text: '<p class="weui-prompt-text">' + (config.text || '') + '</p><input type="text" class="weui-input weui-prompt-input" id="weui-prompt-input" value="' + (config.input1 || '') + '" />' + '<input type="text" class="weui-input weui-prompt-input" id="weui-prompt-input" value="' + (config.input2 || '') + '" />',
        title: title,
        buttons: [{
            text: onCancel,
            className: "primary",
            onClick: function () {
                console.log("cancel");
                $.closeModal();
            }
        }
            , {
                text: onOK,
                className: "primary",
                onClick: function () {
                    console.log("ok");
                }
            }
        ]
    });
}