EveR_ Posted August 30, 2021 Share Posted August 30, 2021 Site URL: https://parrotfish-helix-nx86.squarespace.com/config/pages Hello, I found a way for SQ to accept a pop-up code without disrupting the layout. The only issue left is that it needs to be centred, insted it looks as in the picure. Not-linked page I am working on is: Testimonials EVE layout works (Copy) The pop-up code is the following: <!DOCTYPE html> <head> <title>Creating a modal window with HTML5 & CSS3</title> <style> .modalDialog { position: fixed; font-family: Proxima Nova, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; !important> } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 560px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } h2 { text-align:center; } </style> </head> <body> <a href="#Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) >">Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) ></a> <div id="Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) >" class="modalDialog"> <div> <a href="#close" title="fadeout" class="close">X</a> <h2>Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA)</h2> <h2><p style="font-family:Proxima Nova; font-weight:300; font-style:normal; font-size:16px; letter-spacing:0.02px; line-height:1.7em; color:hsl(0, 0%, 0%);" !important> “I spent about 3 months at the Chamber of Commerce in Japan, and that was a transformative time for me! I got to both experience doing business with diverse clients from both Japan and North America, and also organize the events we met them at! Having the opportunity to hear the stories of businessmen/women from overseas working hard in a foreign country was a unique experience I wouldn’t forget. This internship taught me both the intricacies of handling clients of all backgrounds and also the mechanics of organizing large events. I am extremely grateful for this opportunity offered to me and hope to keep on developing my skills that were nurtured during this internship.” </h2> <iframe width="560" height="315" src="https://www.youtube.com/embed/jbcwGBmfzdQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </body> Link to comment
tuanphan Posted August 31, 2021 Share Posted August 31, 2021 Can you share link to Testimonials EVE layout works (Copy) page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.