home123 Posted November 8, 2006 Share Posted November 8, 2006 HelloI want to make a popup input box like the prompt box but i want to costumize it- not just a line input for text but also a select option. how do i do this????Thank you Link to comment Share on other sites More sharing options...
aspnetguy Posted November 8, 2006 Share Posted November 8, 2006 you want an input box and a selectbox??? Or did you mean a select box instead of an input box??? Let me know and I'll whip up some code for you. Link to comment Share on other sites More sharing options...
aspnetguy Posted November 8, 2006 Share Posted November 8, 2006 is this what you were looking for? <html><head> <title>Custom Prompt</title> <script type="text/javascript"> function customPrompt(title,question,id) { //create prompt box var box = document.getElementById(id); var promptBox = document.createElement('div'); promptBox.id = 'prompt'; promptBox.style.width = '200px'; promptBox.style.height = '50px'; promptBox.style.backgroundColor = '#eeeeee'; promptBox.style.border = '1px solid #b8b8b8'; promptBox.style.fontFamily = 'arial'; promptBox.style.fontSize = '11px'; promptBox.style.position = 'absolute'; promptBox.style.top = '50px'; promptBox.style.left = '50px'; promptBox.style.padding = '10px'; //promptBox content promptBox.innerHTML = '<div style="padding-bottom:5px"><strong>' + title + '</strong></div>' + '<div style="padding-bottom:5px">' + question + '</div>' + '<div style="padding-bottom:5px"><select id="opt">' + '<option value="value 1">option 1</option>' + '<option value="value 2">option 2</option>' + '</select></div>' + '<div><input type="button" value="OK" ' + 'onclick="promptDone(\'' + id + '\')"/></div>'; //display prompt box document.body.appendChild(promptBox); } function promptDone(id) { var box = document.getElementById(id); var p = document.getElementById('prompt'); var sel = document.getElementById('opt'); box.value = sel.options[sel.selectedIndex].value; document.body.removeChild(p); } </script></head><body> <form name="form1" action="" method="post"> <table> <tr> <td><input type="text" readonly="readonly" size="10" name="txtBox" id="txtBox"/></td> <td><input type="button" value="Select Value" name="btnPress" id="btnPress" onclick="customPrompt('box title','box question','txtBox')"/></td> </tr> </table> </form></body></html> Link to comment Share on other sites More sharing options...
home123 Posted November 8, 2006 Author Share Posted November 8, 2006 aspnetguy thanks. this is what i wanted(i will costimize it for me) where can i read an explenation of all this code since i don't understand all of it.Thank you Link to comment Share on other sites More sharing options...
home123 Posted November 9, 2006 Author Share Posted November 9, 2006 thank you for your answer. i wanted to ask 2 more questions:1)how do i make the window close if the user clicks outside of it2)i have a lot of input(also dinamicly) boxes that i use this script for and every time it opens at the top of the page. i know how to change the location to a diifrint one but how can i set it up to be close to my input box(give it a reletive location)?Thank you Link to comment Share on other sites More sharing options...
MrAdam Posted November 11, 2006 Share Posted November 11, 2006 to answer question 2:replace your script with this modded version: <script type="text/javascript"> function customPrompt(title,question,id) { if(!document.getElementById("prompt")) { //create prompt box var box = document.getElementById(id); var promptBox = document.createElement('div'); promptBox.id = 'prompt'; } else { //retrieve prompt box var promptBox = document.getElementById('prompt'); } promptBox.style.width = '200px'; promptBox.style.height = '50px'; promptBox.style.backgroundColor = '#eeeeee'; promptBox.style.border = '1px solid #b8b8b8'; promptBox.style.fontFamily = 'arial'; promptBox.style.fontSize = '11px'; promptBox.style.position = 'absolute'; promptBox.style.top = event.clientY+10; promptBox.style.left = event.clientX+10; promptBox.style.padding = '10px'; //promptBox content promptBox.innerHTML = '<div style="padding-bottom:5px"><strong>' + title + '</strong></div>' + '<div style="padding-bottom:5px">' + question + '</div>' + '<div style="padding-bottom:5px"><select id="opt">' + '<option value="value 1">option 1</option>' + '<option value="value 2">option 2</option>' + '</select></div>' + '<div><input type="button" value="OK" ' + 'onclick="promptDone(\'' + id + '\')"/></div>'; if(!document.getElementById("prompt")) { //display prompt box if it's first time document.body.appendChild(promptBox); } } function promptDone(id) { var box = document.getElementById(id); var p = document.getElementById('prompt'); var sel = document.getElementById('opt'); box.value = sel.options[sel.selectedIndex].value; document.body.removeChild(p); } </script> .. sorry bout the alignment ... lemme know how it goes Link to comment Share on other sites More sharing options...
home123 Posted November 24, 2006 Author Share Posted November 24, 2006 MrAdam thank you i have another problemwhat you posted wroks but if the page is longer then the browsers height and i need to scrool down to get to the input box the popup does not pop in the right place. i need to scroll up to see it. how can i fix this???thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now