Ron Brinkman Posted July 24, 2022 Share Posted July 24, 2022 (edited) <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>W3.CSS Modal</h2> <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal id01</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span> <p>Some text. Some text1. Some text1.</p> <p>Some text. Some text1. Some text1.</p> </div> </div> </div> <br><br> <button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black">Open Modal id02</button> <br> <div id="id02" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-display-topright">×</span> <p>Some text. Some text2. Some text2.</p> <p>Some text. Some text2. Some text2.</p> </div> </div> </div> </div> </body> </html> The above code, modified from https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal to display two different modals, works fine - but I was getting tired of creating unique IDs for each Modal, and repeating the ID three times. So, I was hoping that I could use an approach with an Adjacent Sibling Selector (+) similar to that shown in https://www.w3schools.com/howto/howto_css_display_element_hover.asp except that a Modal would be displayed rather than a block. The attempts I have made have not been successful. I would be happy to have the Modal appear with either the "onclick" method or "hover" method. It would just make code maintenance easier to simply place the actuating portion of the code next to the display portion, simplifying the process. Is it possible to make the Adjacent Sibling Selector work with Modals? Edited July 24, 2022 by Ron Brinkman added missing word Link to comment Share on other sites More sharing options...
dsonesuk Posted July 24, 2022 Share Posted July 24, 2022 <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>W3.CSS Modal</h2> <button onclick="this.nextElementSibling.style.display='block'" class="w3-button w3-black">Open Modal</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="this.closest('.w3-modal').style.display='none'" class="w3-button w3-display-topright">×</span> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div> </div> </div> </div> </body> </html> As long as the next sibling is class w3-modal element it should work. Link to comment Share on other sites More sharing options...
Ron Brinkman Posted July 24, 2022 Author Share Posted July 24, 2022 Perfect. The redefinition of the onclick statement was the part I was not capable of determining. Thank You! Link to comment Share on other sites More sharing options...
Ron Brinkman Posted July 30, 2022 Author Share Posted July 30, 2022 Later I ran onto an odd situation (to me at least) that I banged my head against the wall for a long time to track down. In my use, I have a paragraph of explanatory text preceding the button, and text that immediately follows the button. When the paragraph is inserted into the code there were two surprises: The modal quit working The text following the button was forced to start on a new line - it was not permitted to immediately follow the button. Here's the (slightly) modified code: <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>W3.CSS Modal</h2> <p>Push this button ... <button onclick="this.nextElementSibling.style.display='block'" class="w3-button w3-black">Open Modal</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="this.closest('.w3-modal').style.display='none'" class="w3-button w3-display-topright">×</span> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div> </div> </div> ... to see how a modal works</p> </div> </body> </html> The reason for my need is that I replace the big black button with an "information" icon, so the insertion into the middle of the string of text makes sense. FWIW, my button is: <button class="btn" onclick="this.nextElementSibling.style.display='block'"><i class="fa fa-info-circle"></i></button> I can probably find a way to accommodate this issue, but if anybody has an elegant solution I would appreciate seeing it. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 30, 2022 Share Posted July 30, 2022 Shouldn't make any difference?, the button is still used and still a sibling to modal. Check the button still has a height, width and not zeroed. Link to comment Share on other sites More sharing options...
Ron Brinkman Posted July 30, 2022 Author Share Posted July 30, 2022 My mental model of a modal is that it's completely autonomous from the "outside world". I can do anything I want in the modal and it doesn't affect the outside, and vice versa. When I run the example above, which simply places the modal inside a paragraph (<p>...</p>) the modal does not work, an the text following the button is forced onto a new line. See the attached WithPara.jpg image. When I remove the paragraph tags the modal now works, and the text following the button stays inline with the button. See the attached NoPara.jpg image. As I noted, my workaround is simply to omit the paragraph tags, but that seems counter to what I do everywhere else, which is to keep my paragraphs of text inside paragraph structures. But I may be wrong 😁 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 30, 2022 Share Posted July 30, 2022 (edited) Like I said when I created the code On 7/24/2022 at 9:22 AM, dsonesuk said: As long as the next sibling is class w3-modal element it should work. You have button changing paragraph to a block element which it already is! While modal remains hidden and then close icon changing modal to display none? Which it is already also. ALSO you don't place block element (div) inside a paragraph. onclick="this.parentElement.querySelector('.w3-modal').style.display='block'" AS LONG as button and modal are siblings this should work, even you have sibling paragraph or break line element between them. Edited July 30, 2022 by dsonesuk OP moved posts Link to comment Share on other sites More sharing options...
Ron Brinkman Posted July 30, 2022 Author Share Posted July 30, 2022 Thank you dsonesuk, I obviously need t study up on the interaction of the structures - my bad. In the meantime, the modal is working with the paragraph removed. 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