| <style type="text/css"> |
| /** |
| * CSS Modal |
| * Modal as reusable module |
| * http://drublic.github.com/css-modal |
| * |
| * @author Hans Christian Reinl - @drublic |
| * @version 1.0.4 |
| */ |
| html { |
| overflow-y: scroll; |
| } |
| .has-overlay { |
| overflow: hidden; |
| } |
| |
| .has-overlay>body { |
| height: 100%; |
| overflow-y: scroll; |
| } |
| |
| .semantic-content { |
| -webkit-transform: translate(0, 100%); |
| -moz-transform: translate(0, 100%); |
| -o-transform: translate(0, 100%); |
| -ms-transform: translate(0, 100%); |
| transform: translate(0, 100%); |
| -webkit-transform: translate3d(0, 100%, 0); |
| transform: translate3d(0, 100%, 0); |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 999; |
| opacity: 0; |
| color: #222; |
| line-height: 1.3; |
| display: none\9; |
| } |
| |
| .semantic-content:target { |
| -webkit-transform: translate(0, 0); |
| -moz-transform: translate(0, 0); |
| -o-transform: translate(0, 0); |
| -ms-transform: translate(0, 0); |
| transform: translate(0, 0); |
| opacity: 1; |
| } |
| |
| .is-active.semantic-content { |
| display: block\9; |
| } |
| |
| .semantic-content:target { |
| display: block\9; |
| } |
| |
| .semantic-content .modal-inner { |
| position: absolute; |
| top: 50px; |
| left: 50%; |
| z-index: 20; |
| margin-left: -325px; |
| width: 650px; |
| overflow-x: hidden; |
| border-radius: 2px; |
| background: #fff; |
| -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); |
| box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); |
| } |
| |
| .semantic-content .modal-inner>img,.semantic-content .modal-inner>video,.semantic-content .modal-inner>iframe |
| { |
| width: 100%; |
| height: auto; |
| min-height: 300px; |
| } |
| |
| .semantic-content .modal-inner>img { |
| width: auto; |
| max-width: 100%; |
| } |
| |
| .semantic-content .modal-header { |
| border-bottom: 1px solid #dddddd; |
| padding: 0 1.2em; |
| } |
| |
| .semantic-content .modal-header>h2 { |
| margin: 0.5em 0; |
| border-bottom:0; |
| } |
| |
| .semantic-content .modal-content { |
| max-height: 400px; |
| max-height: 70vh; |
| border-bottom: 1px solid #dddddd; |
| padding: 15px 1.2em; |
| overflow-x: hidden; |
| overflow-y: auto; |
| } |
| |
| .semantic-content .modal-content>* { |
| max-width: 100%; |
| } |
| |
| .semantic-content .modal-footer { |
| border-top: 1px solid white; |
| padding: 13px 1.2em 18px; |
| background: #f0f0f0; |
| border-radius: 2px; |
| } |
| |
| .semantic-content .modal-close { |
| display: block; |
| text-indent: -100px; |
| overflow: hidden; |
| } |
| |
| .semantic-content .modal-close:before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 10; |
| background: |
| url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg=="); |
| } |
| |
| .semantic-content .modal-close:after { |
| content: '\00d7'; |
| position: absolute; |
| top: 25px; |
| left: 50%; |
| z-index: 20; |
| margin-left: 285px; |
| background: #fff; |
| border-radius: 2px; |
| padding: 4px 8px; |
| font-size: 1.2em; |
| text-decoration: none; |
| text-indent: 0; |
| } |
| |
| @media screen and (max-width: 690px) { |
| .semantic-content .modal-inner { |
| width: auto; |
| left: 20px; |
| right: 20px; |
| margin-left: 0; |
| } |
| .semantic-content .modal-close { |
| left: auto; |
| right: 33px; |
| margin-left: 0; |
| } |
| .semantic-content .modal-close:after { |
| margin-left: 40%; |
| } |
| } |
| |
| @media screen and (max-width: 30em) { |
| .semantic-content { |
| -webkit-transform: translate(0, 400px); |
| -webkit-transform: translate3d(0, 100%, 0); |
| transform: translate3d(0, 100%, 0); |
| -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; |
| -moz-transition: -moz-transform .25s ease-in-out, opacity 1ms .25s; |
| -o-transition: -o-transform .25s ease-in-out, opacity 1ms .25s; |
| -ms-transition: -ms-transform .25s ease-in-out, opacity 1ms .25s; |
| transition: transform .25s ease-in-out, opacity 1ms .25s; |
| display: block; |
| height: 100%; |
| bottom: auto; |
| } |
| .semantic-content:target { |
| -webkit-transition: -webkit-transform .25s ease-in-out; |
| -moz-transition: -moz-transform .25s ease-in-out; |
| -o-transition: -o-transform .25s ease-in-out; |
| -ms-transition: -ms-transform .25s ease-in-out; |
| transition: transform .25s ease-in-out; |
| } |
| .semantic-content:before { |
| background-color: #27aae2; |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#27aae2), |
| to(#1c9cd3)); |
| background-image: -webkit-linear-gradient(top, #27aae2, #1c9cd3); |
| background-image: -moz-linear-gradient(top, #27aae2, #1c9cd3); |
| background-image: -o-linear-gradient(top, #27aae2, #1c9cd3); |
| background-image: linear-gradient(to bottom, #27aae2, #1c9cd3); |
| content: ''; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 30; |
| height: 3em; |
| -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); |
| } |
| .semantic-content .modal-inner { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| top: 0; |
| left: 0; |
| right: 0; |
| padding-top: 3em; |
| height: 100%; |
| overflow: scroll; |
| -webkit-box-shadow: none; |
| box-shadow: none; |
| } |
| .semantic-content .modal-content { |
| max-height: none; |
| } |
| .semantic-content .modal-close { |
| right: auto; |
| text-decoration: none; |
| } |
| .semantic-content .modal-close:before { |
| display: none; |
| } |
| .semantic-content .modal-close:after { |
| content: attr(data-close); |
| top: 0.4em; |
| left: 1em; |
| z-index: 40; |
| margin-left: 0; |
| font-size: 1em; |
| padding: 0.5em 1em; |
| } |
| } |
| |
| @media screen and (max-height: 46em) and (min-width: 30em) { |
| .semantic-content .modal-content { |
| max-height: 340px; |
| max-height: 50vh; |
| } |
| } |
| |
| @media screen and (max-height: 36em) and (min-width: 30em) { |
| .semantic-content .modal-content { |
| max-height: 265px; |
| max-height: 40vh; |
| } |
| } |
| |
| @media screen and (min-width: 30em) { |
| .semantic-content { |
| -webkit-transition: opacity 0.4s; |
| -o-transition: opacity 0.4s; |
| transition: opacity 0.4s; |
| } |
| } |
| #surveyMonkeyInfo{ |
| width:100%; |
| font-size:10px; |
| color:#666; |
| } |
| #sm_e_s{ |
| overflow:hidden; |
| border:0px; |
| padding-bottom:4px; |
| } |
| #logo{ |
| font-size:12px; |
| } |
| #logo span{ |
| position:absolute; |
| top:43px; |
| } |
| #logo-a{ |
| padding:18px 18px 0 18px; |
| } |
| #logo-b{ |
| padding:24px 18px 0 18px; |
| } |
| #logo-c{ |
| padding:25px 18px 0 18px; |
| } |
| </style> |
| <?php |
| $logo = array(); |
| $logo[] = array( |
| 'survey' => 'https://www.surveymonkey.com/jsEmbed.aspx?sm=v_2fUJ5cztOQKSptKXZy7m6A_3d_3d', |
| 'logo' => 'logo-a.png', |
| 'id' => 'logo-a', |
| ); |
| $logo[] = array( |
| 'survey' => 'https://www.surveymonkey.com/jsEmbed.aspx?sm=ONll9vUPFuy_2bbxtpH3If2Q_3d_3d', |
| 'logo' => 'logo-b.png', |
| 'id' => 'logo-b', |
| ); |
| $logo[] = array( |
| 'survey' => 'https://www.surveymonkey.com/jsEmbed.aspx?sm=Uv7H96jTj2RQN7rDTsjF0A_3d_3d', |
| 'logo' => 'logo-c.png', |
| 'id' => 'logo-c', |
| ); |
| |
| $survey = $logo[2]; |
| ?> |
| |
| <!-- Call the modal by clicking this link --> |
| <a href="#modal-text" class="call-modal" |
| title="Do you like this new logo?"><img |
| src="/home/promotions/logovoting/logo/<?php print $survey['logo'];?>" |
| alt="Eclipse.org" id="<?php print $survey['id'];?>"/><span>Do you like this new logo?</span></a> |
| |
| <!-- A modal with its content --> |
| <section class="semantic-content" id="modal-text" tabindex="-1" |
| role="dialog" aria-labelledby="modal-label" aria-hidden="true"> |
| |
| <div class="modal-inner"> |
| <div class="modal-header"> |
| <h2 id="modal-label">Do you like this new logo?</h2> |
| </div> |
| |
| <div class="modal-content"> |
| <div id="surveyMonkeyInfo"> |
| <iframe id="sm_e_s" src="<?php print $survey['survey'];?>" width="100%" height="600" frameborder="0" allowtransparency="true" scrolling="no"></iframe> |
| </div> |
| </div> |
| |
| <div class="modal-footer"> |
| Create your free online surveys with <a href="https://www.surveymonkey.com">SurveyMonkey</a> , the world's leading questionnaire tool. |
| </div> |
| </div> |
| |
| <!-- Use Hash-Bang to maintain scroll position when closing modal --> |
| <a href="#!" class="modal-close" title="Close this modal" |
| data-dismiss="modal">×</a> |
| </section> |
| |
| <script src="/home/promotions/logovoting/modal.js"></script> |
| <!-- JS for Modal --> |