Morshed Alam

Below is a simple JavaScript code to create a custom prompt pop-up to get user input and set it to target field.

/**
 * Open a custom prompt window to get user input
 * @param l String, Input label
 * @param v String, Default value of input box
 * @param len Integer, Max length of input box
 * @param t String, Window title
 * @return Set input value to target element
 */
var promptWin = function (l, v, len, t) {
    var args = {
            title:(t === undefined ? (document.title ? document.title : '') : t),
            label:(l === undefined ? '' : l),
            value:(v === undefined ? '' : v),
            length:(len === undefined ? '256' : len),
            target:document.getElementById(event.target.getAttribute('data-target'))
        },
        prompt = document.createElement('div'),
        body = document.getElementsByTagName('body')[0];

    //Creating prompt window
    prompt.setAttribute('id', 'prompt');
    
    prompt.innerHTML = ' 
'
        + ' 
'
        + args.title + '
'
        + ' 
'
        + ' 
'
        + (args.label ? '
' + args.label + '
' : '')
        + '         + ' id="prompt_input" '
        + ' maxlength="' + args.length + '" '
        + ' onblur="this.focus();" '
        + ' style="min-width: 200px" />
'
        + ' 
'
        + '         + ' style="background-color: whiteSmoke;'
        + ' width: 70px;-moz-border-radius: 3px;'
        + ' -webkit-border-radius: 3px;'
        + ' color: #000000;padding: 3px 5px;"/>'
        + '         + ' style="background-color: #04C;width: 70px;'
        + ' padding: 3px 5px;-moz-border-radius: 3px;'
        + ' -webkit-border-radius: 3px;color: #333;"/>'
        + ' 
';

    //Append window in to body
    body.appendChild(prompt);

    var pos = cursorPosition(window.event);
    pos.bh = Number(body.scrollHeight || body.offsetHeight);
    pos.bw = Number(body.scrollWidth || body.offsetWidth);
    pos.ph = Number(prompt.scrollHeight || prompt.offsetHeight);
    pos.pw = Number(prompt.scrollWidth || prompt.offsetWidth);

    //Setting the wizard ar center of the window
    prompt.style.position = 'absolute';
    prompt.style.top = (pos.y > pos.bh ? (pos.bh - pos.y) : pos.y) + 'px';
    prompt.style.left = (pos.x > pos.bw ? (pos.bw - pos.x) : pos.x) + 'px';

    //Focus input box as default
    var input = document.getElementById("prompt_input");
    input.focus();

    //Bind event to remove window on cancel
    document.getElementById('prompt_cancel').onclick = function () {
        body.removeChild(prompt);
    };

    //Call caller method on OK
    document.getElementById('prompt_ok').onclick = function () {
        if (input.value && args.target) {
            console.log(args.target.nodeName);
            switch (args.target.type || args.target.nodeName) {
                case 'select-one':
                case 'select-multiple':
                    var option = document.createElement("option");
                    option.text = input.value;
                    option.value = input.value;
                    args.target.appendChild(option);
                    args.target.selectedIndex = args.target.options.length - 1;
                    break;

                case 'DIV':
                case 'TD':
                case 'SPAN':
                    args.target.innerHTML = input.value;
                    break;

                default:
                    args.target.value = input.value;
                    break;
            }
        }

        body.removeChild(prompt);
    };
}

/**
 * Return cursor position
 * @param e
 * @return {Object}
 */
var cursorPosition = function (e) {
    e = e || window.event;

    var pos = {x:0, y:0};

    if (e.pageX || e.pageY) {
        pos.x = e.pageX;
        pos.y = e.pageY;
    } else {
        var de = document.documentElement;
        var b = document.body;
        pos.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        pos.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }

    return pos;
}

Uses:

data-target="age" 
onclick="promptWin('Enter name');">[+]

The above code will open a prompt window with a input box to get user input and set the input value in to data-target field on click to OK.