Hello.

Imagine select (the most common). I want to make a pop-up window when I click on the ref. position in select. There is a misunderstanding here, first of all, that all JQ pop-up windows from Ineta are designed only for 1 window on one page. 2, 5, 10 - you can forget.

Is it possible to make a pop-up window at a certain selected value in select?

<select name="supername"> <option value="0">Π²Ρ‹Π±ΠΈΡ€ΠΈΡ‚Π΅ дСйствиС</option> <option value="1">Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½ΠΎ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ 1</option> <option value="2">Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½ΠΎ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ 2</option> <option value="3">просто Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ 3ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</option> <option value="4">Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½ΠΎ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ 3</option> </select>


    2 answers 2

     <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JavaScript select</title> </head> <body> <select name="supername" id="supername" onchange="foo()"> <option value="0">Π²Ρ‹Π±ΠΈΡ€ΠΈΡ‚Π΅ дСйствиС</option> <option value="okno1">Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½ΠΎ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ 1</option> <option value="okno2">Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½ΠΎ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ 2</option> <option value="3">просто Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ 3ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</option> <option value="okno3">Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½ΠΎ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ 3</option> </select> <div id="okno1" style="display: none"> <p>Okno1</p> </div> <div id="okno2" style="display: none"> <p>Okno2</p> </div> <div id="okno3" style="display: none"> <p>Okno3</p> </div> </body> </html> <script> function foo() { var newWin = open('/', 'example', 'width=600,height=400'); var selected = document.getElementById('supername'); content = document.getElementById(selected.value).innerHTML; newWin.focus(); newWin.onload = function() { var div = newWin.document.createElement('div'); div.innerHTML = content; div.style.fontSize = '30px'; var body = newWin.document.body; body.insertBefore(div, body.firstChild); }; } </script>
    • Respected. It worked, super! Even there is no conflict with other scripts, but I didn’t want an alert, but something like a div block in which everything was loaded. (by the way, alert doesn't work for some, if we say to click the checkbox - to stop the execution of scripts for this page) by the way it worked when selecting item 3 (I described that item without a window, because the windows are not everywhere) - frank
    • You can <option value = "DIVname"> and when you select a value from the selector, you can create a new window and load information from the DIVname into it, you can also name the window as a DIVname so that you can open several windows at once. - gooda
    • Oh, I just asked what I understand badly. I understand this with the select: <select name = "supername" id = "supername" onchange = "foo ()"> <option value = "0"> select the action </ option> <option value = "okno1"> pop-up window with information 1 </ option> <option value = "okno2"> pop-up window with information 2 </ option> <option value = "3"> simply select the 3rd item </ option> <option value = "okno3"> pop-up window with information 3 </ option> </ select> divs you can do display: none yourself and here’s how to attach a script to them, this is an abyss - frank
    • you can also do a case check and if there is any value then do not execute the script - gooda

    If the content, depending on the selected position of the drop-down list, you load dynamically, then one block is enough as a modal window. Otherwise, you need to create the number of blocks equal to the elements of the list, with one class that will determine the appearance of the window on the page. At the choice of the element of the list, we calculate its index and further, with a slight movement of the hand, open the block of the modal window with the identical index.

    • The content is not dynamic, I have already created the blocks. the number of blocks diverges from the number of elements of the list (I described what we say the 3rd element in the list is simple, without a window, although it may not be the 3rd). the view on the page is just what the div would fit in, as is usually the case in many examples from Ineta (it doesn't matter to me which one to use). A modal window is not an option. you can ban it. A pop-up window is another matter. - frank
    • > modal window is not an option, because you can ban it. Can not ban. Moreover, the " modal window " === " pop-up window ." In other matters, above you have already been given a tip on which way to dig. - Deonis
    • modal window, the same alert - you can put a daw on it, that would not show it. with the second choice from the same select - nothing will happen (the owners of the browser opera will understand me anyway). asked because I’ve already dug myself, and there’s not enough knowledge in this area to write about what I’ve asked myself. On the hashcode, by the way, there are topics related to pop-up windows, but only one - frank
    • @frank, what would you prohibit in this case ? And by the way, you can do as many of these pop-up windows as in the example. - Deonis