Friday, December 25, 2009

Custom prompt window using JavaScript

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 + '
' : '') + '
' + '
' + ' ' + ' ' + '
'; //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:
[+]
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.

View Demo


No comments:

Post a Comment