Proof of concept:
How this works: The image of the string of code below represents "button 1" at the top of this page. This all has to be set up within the page source. If you have more than one popup on a page (section) you have to create separate functions for each, essentially just rename it. Something like "openThisContentWhyConnect ();" - it is important to note that whatever you name it, it will have to be the same in both locations (see both highlighted "1"s in the image below). You can chenge the button text by changing the "Button 1" text. The conent itself goes where I have the "Pop up content source goes here 1". It doesn't show up anywhere on the page itself, so you can't do much formatting within the editor. It may be easier to format the content on another page then copy/paste the source code. It is VERY finicky. I had to condense it all to a single line, define a h7 to get red text (yours browser is likely cached from before that update), and I haven't been able to any of the content within the popup. but it does technically work. - I don't love the idea of this in practice for a few reasons; mostly because a significant majority of users will not interact with those clickable elements at all, essentially hiding the content that they want users to read (should just be front and center like it is now).
why connect button: test
About, How, Why: test