1/2/2023 0 Comments Create popup window javascriptUsing JavaScript to control the DIV popupĪs we saw above, we can use JavaScript to change the properties of a DIV or SPAN element. Onmouseover="document.getElementById('PopUp').style.display = 'none' " In this case we identify the DIV element by its ID 'PopUp' and change its style display property to 'none' so that it becomes invisible. 'I can\'t have quotes within quotes.').įinally, we used a bit of JavaScript in the DIV definition to make it disappear automatically whenever the mouse touches it. Later, we will be able to change the contents of the SPAN using a line of JavaScript, just as we can change the contents of a textbox or other object.ĭocument.getElementById('PopUpText').innerHTML = "Here is the new text that will appear in place of the word TEXT in our SPAN" ĭon't forget that in any text, you may need to use an escape character to include quotes within quotes: \' or \" (e.g. When we created the DIV, the SPAN contained the word "TEXT". We refer to the SPAN by name or ID this SPAN is called 'PopUpText'. It just allows us to easily apply and change properties of whatever is within the SPAN. CREATE POPUP WINDOW JAVASCRIPT CODEIn order to change the contents of the DIV for appropriate feedback for each answer, we need a named element that our JavaScript code can refer to. We can later make changes to the DIV properties by referring to the DIV by name or ID this DIV is called 'PopUp'. In our example, the width of the DIV is 135 pixels (135px), but the height will automatically adjust to whatever it contains. Note that the various properties in the DIV style are all between quotation marks, single or double. STYLE='display:block ' or STYLE='display:none ' can make the DIV appear and disappear. These include display, left, top, border, background-color, font-size, width, and others. The characteristics or properties of the DIV are controlled by its STYLE. You can copy and paste this DIV into the BODY (not the HEAD) of your web page in CODE view. This DIV is designed to automatically disappear when the user mouses over it (preventing a student from copying and pasting an answer from the popup box). It includes a SPAN called PopUpText that will receive the contents that will be shown in the PopUp box. This is the code for a DIV named PopUp that is a box which can appear and disappear. Question 2: What is the color of Henri V's white horse? Question 1: Who is buried in Grant's tomb? Second, you need a script function to make the DIV appear
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |