Geek Answers Handbook

Positioning tooltip popup in javascript

I have a javascript request as shown below and I would like to call the center of the prompt on the screen. How to do this when using javascript?

function showUpdate() { var x; var name=prompt("Please enter your name",""); if ( name != null ) { x="Hello " + name + "! How are you today?"; alert("Input : " + name ); } }

And here is what I call it:

 <a onclick = "showUpdate() " style="vertical-align: middle;" class="parent" href=""><span>5. Missed P/U Comments</span></a>

Search works, except that the invitation is sent to the left corner in IE and centered in Firefox but I need the same solution to work in both browsers.

+5
source share
5 answers

prompt (and alert ) pop-ups are implemented differently depending on the browser you are using. This is because pop-ups are browser features, they are not JavaScript objects or anything like that. (Just as the console is different for each browser, it depends on the implementation.)

If you really want your tips to be arranged / styled sequentially, you will need to create your own invitation.

The easiest way out is to use a library like jQueryUI .

Alternatively, you can simply create it yourself:

 document.getElementById('showPromptButton').addEventListener('click', showSprompt); document.getElementById('promptButton').addEventListener('click', submitPrompt); var prompt = document.getElementById('myPrompt'); var promptAnswer = document.getElementById('promptAnswer'); function showSprompt() { promptAnswer.value = ''; // Reset the prompt answer document.getElementById('promptQuestion').innerText = "What your question?"; // set the prompt question prompt.style.display = 'block'; // Show the prompt } function submitPrompt() { var answer = promptAnswer.value; // Get the answer prompt.style.display = 'none'; // Hide the prompt console.log(answer); } 
 #myPrompt{ display:none; /* Style your prompt here. */ } 
 <input id="showPromptButton" type="button" value="Show Prompt" /> <div id="myPrompt" class="proptDiv"> <span id="promptQuestion"></span> <input id="promptAnswer" type="text" /> <input id="promptButton" type="button" value="Submit" /> </div>
+4
source

You cannot configure or post a default javascript hint. Check out this SO answer for workarounds.

How to customize a javascript prompt?

+2
source

... but I need the same solution to work in both browsers.

prompt (and his cousin alert ) are very outdated. You do not control their appearance or position. It is best to avoid them.

Instead, you can make a pop-up message using an absolutely positioned div (or any other block element), which not only gives you full control over its position, but also full style. If you look around, you will find dozens of examples of this and the tools for this, you do not need to roll on your own if you really do not want it.

No matter how you end up doing this, your logic using it will have to change because prompt is synchronous (all scripts on the page go to screech and wait for prompts), whereas modern methods are asynchronous (oriented to developments). So, for example, your new code for using a popup may look like this:

 function showUpdate() { popup("Please enter your name","", function(name) { if (name!=null) { x="Hello " + name + "! How are you today?"; alert("Input : "+name); // <== I left this one alone, looks like debugging } }); }
+2
source

Hints, warnings and confirmations are the main functions that each browser has its own way of displaying to the user. There really is no reason why you should configure these features.

If you really need advanced functionality and full customization, you will need to make your own alert. You can do this in one of several ways. One of the two options that I propose is to create two divs (one that fades out the rest of the page and one that appears as a warning) in Javascript, and use them as a pseudo-hint. Secondly, you need to create a new window, remove a lot of its functionality and change some HTML on a recently opened page so that it looks like a reminder.

It seems to me that the latter really overdid it. If you need a hint, they are ugly ... Otherwise, you need to do something yourself with a positioned div and a faded background.

+2
source

NOTE. The window.showModalDialog() method has been deprecated and is not supported in modern browsers. Please do not use it .

You cannot change the position of window.alert() , but you can do it with window.showModalDialog() as described on this page: http://bytes.com/topic/javascript/answers/849283-change-position-alert -possible

https://developer.mozilla.org/en-US/docs/DOM/window.showModalDialog

+2
source

More articles:


All Articles