-1
<style>
@font-face {
font-family: 'dalafloda';
src: url('DalaFloda-Roman.eot');
src: url('DalaFloda-Roman.eot?#iefix') format('embedded-opentype'),
url('DalaFloda-Roman.woff2') format('woff2'),
url('DalaFloda-Roman.woff') format('woff'),
url('DalaFloda-Roman.ttf') format('truetype'),
url('DalaFloda-Roman.svg#dalafloda') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'verlag';
src: url('Verlag-Book.eot');
src: url('Verlag-Book.eot?#iefix') format('embedded-opentype'),
url('Verlag-Book.woff2') format('woff2'),
url('Verlag-Book.woff') format('woff'),
url('Verlag-Book.ttf') format('truetype'),
url('Verlag-Book.svg#verlag') format('svg');
font-weight: normal;
font-style: normal;
}
.fancybox-skin {
background:#000;
border:4px solid #000000;
padding: 0 !important;
}
#target {padding:0px !important;}
#target input[type="text"],
#target input[type="number"],
#target input[type="password"],
#target input[type="email"],
#target textarea, #target select {
border:1px solid #dee7de;
}
#target .sign_up {
/*background:url(https://cdn.shopify.com/s/files/1/0435/8625/t/5/assets/get-img.jpg?1906) no-repeat right top !important;*/
border: 0 none !important;
border-radius: 0 !important;
color: #000 !important;
float: right;
font-size: 0 !important;
height: 24px;
text-align: left;
}
#target input[type="text"]:focus, #target textarea:focus {
border: 1px solid #868d95 !important;
border-radius: 0 3px 3px 0 !important;
outline:0;
}
.fancybox-wrap #target input[type="submit"]{margin-top:0!important;}
.fancybox-wrap input.mailing-list-email{margin:0}
.fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp {
padding:0;
margin:0;
border:0;
outline:none;
vertical-align:top
}
.fancybox-wrap {
position:absolute;
top:0;
left:0;
z-index:8020
}
.fancybox-skin {
position:relative;
background-color:#ffffff;
color:#444;
text-shadow:none;
padding:0px!important;
}
.fancybox-opened {
z-index:8030
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow:0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow:0 10px 25px rgba(0, 0, 0, 0.5)
}
.fancybox-outer, .fancybox-inner {
position:relative;
text-align:center;
width: 100% !important;
}
.fancybox-inner {
min-height: 385px;
overflow: hidden !important;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling:touch
}
.fancybox-error {
color:#444;
font:14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin:0;
padding:15px;
white-space:nowrap
}
.fancybox-image, .fancybox-iframe {
display:block;
width:100%;
height:100%
}
.fancybox-image {
max-width:100%;
max-height:100%
}
#fancybox-loading {
position:fixed;
top:50%;
left:50%;
margin-top:-22px;
margin-left:-22px;
background-position:0 -306px;
opacity:1;
cursor:pointer;
z-index:8060;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
background-color:#fff
}
#fancybox-loading div {
width:44px;
height:44px;
background:url({{'loader.gif'| asset_url}}) center center no-repeat;
background-size:32px 32px;
display:block !important
}
.fancybox-close {
position:absolute;
top:5px;
right:8px;
cursor:pointer;
z-index:8040;
font-size:24px !important;
color:#404040 !important
}
.fancybox-nav {
position:absolute;
top:50%;
cursor:pointer;
text-decoration:none;
background:transparent url("//cdn.shopify.com/s/files/1/1136/5902/t/2/assets/blank.gif?3426909821341757287");
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
z-index:8040
}
.fancybox-prev {
left:-15px;
}
.fancybox-nav.fancybox-prev::after,.fancybox-nav.fancybox-next::after {
content: "";
width:30px; height:34px;
background:#868d95;
display:inline-block;
background:url({{'plyroom-prev.png'| asset_url}});
opacity:0.5;
}
.fancybox-next {
right:-15px;
}
.fancybox-nav.fancybox-next::after {
background:url({{'plyroom-next.png'| asset_url}})
}
.fancybox-nav.fancybox-prev:hover::after,.fancybox-nav.fancybox-next:hover::after {opacity:1}
/*.fancybox-nav span {
position:absolute;
top:45%;
width:60px;
height:60px;
margin-top:-18px;
cursor:pointer;
z-index:8040;
visibility:hidden;
color:#333;
opacity:0.8;
text-shadow:0 0 1px #fff
}*/
.fancybox-prev span {
left:10px
}
.fancybox-next span {
right:10px
}
.fancybox-nav:hover span {
visibility:visible
}
.fancybox-tmp {
position:absolute;
top:-9999px;
left:-9999px;
visibility:hidden
}
.fancybox-lock {
overflow:hidden
}
.fancybox-overlay {
position:absolute;
top:0;
left:0;
overflow:hidden;
display:none;
z-index:8010;
background:url({{'fancybox_overlay.png' | asset_url}})
}
.fancybox-overlay-fixed {
position:fixed;
bottom:0;
right:0
}
.fancybox-lock .fancybox-overlay {
overflow:auto;
overflow-y:scroll
}
.fancybox-title {
visibility:hidden;
position:relative;
text-shadow:none;
z-index:8050;
width:100%
}
.fancybox-opened .fancybox-title {
visibility:visible
}
.fancybox-close::after {
background: #ffffff none repeat scroll 0 0;
color: #98999a;
content: "X";
display: inline-block;
font-size: 14px;
height: 24px;
position: absolute;
right: -8px;
text-align: center;
top: -5px;
width: 24px;
}
.fancybox-title-float-wrap {
position:absolute;
bottom:0;
right:50%;
margin-bottom:-28px;
z-index:8050;
text-align:center
}
.fancybox-title-float-wrap .child {
display:inline-block;
margin-right:-100%;
padding:2px 0px;
background:transparent;
background:rgba(0, 0, 0, 0.6);
text-shadow:0 1px 2px #222;
color:#FFF;
font-weight:bold;
line-height:24px;
white-space:nowrap;
width:100%;
-webkit-border-bottom-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-bottomleft:4px;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px
}
.fancybox-title-outside-wrap {
position:relative;
margin-top:10px;
color:#fff
}
.fancybox-title-inside-wrap {
padding-top:10px
}
.fancybox-title-over-wrap {
position:absolute;
bottom:0;
left:0;
color:#fff;
padding:10px;
background:#000;
background:rgba(0, 0, 0, 0.8)
}
.newsletter {
margin-bottom:1.5em
}
.newsletter_popup .fancybox-skin, .newsletter_popup .fancybox-skin h1 {
color:#404040 !important
}
.newsletter_popup {
background-color:rgba(0, 0, 0, 0)
}
.newsletter_popup .fancybox-close {
color:#ffffff !important
}
.newsletter_popup {
background:rgba(0, 0, 0, 0) url("//cdn.shopify.com/s/files/1/1136/5902/t/2/assets/newsletter_bg.png?3426909821341757287") center center
}
.newsletter_popup .fancybox-skin {
color:#404040 !important;
background-color:transparent
}
.fancybox-wrap{
min-width: 630px;
}
.fancybox-wrap h4{display:none;}
.fancybox-wrap p{margin:0 0 8px; font-size:14px;}
.fancybox-wrap .mailing-list{width:100%}
.fancybox-wrap .contact-form{margin:0 auto; padding:0;}
.fancybox-inner{
min-height: 385px;
}
.fancybox-inner #target h2{
font-family: Dala Floda Web,sans-serif;
color: #58595b;
position: relative;
margin: 0;
padding-top: 95px;
font-size: 24px;
}
.fancybox-inner #target h2 span{
font-family: Dala Floda Web,sans-serif;
color: #58595b;
position: relative;
font-size: 24px;
border-bottom: 2px solid #58595b;
}
.fancybox-inner .newsletter-subheading{
position: relative;
text-transform: uppercase;
width: 60%;
margin: auto;
padding-top: 200px;
color: #58595b;
letter-spacing: 2px;
}
.fancybox-wrap .mailing-list-submit{
right: 3%;
}
@media (max-width: 1200px) {
.fancybox-wrap .mailing-list-submit{
right: 4%;
}
}
@media (max-width: 900px) {
.fancybox-wrap .mailing-list-submit{
right: 7%;
}
}
@media (max-width: 400px) {
.fancybox-wrap{
min-width: 90%;
padding: 20px;
}
.newsletter-bg img{
height: 100%;
}
.fancybox-wrap .contact-form{
max-width: 80%;
}
}
.fancybox-wrap .mailing-list-submit input{
background: url('{{ 'arrow.png' | asset_url }}');
background-repeat: no-repeat;
background-position: center;
}
.newsletter-bg{
position: absolute;
}
</style>
{% if settings.newsletter_popup %}
<a id="newsletter" href="#target"></a>
<div style="display: none;">
<div id="target">
{% if settings.use_newsletter_bg %}<div class='newsletter-bg'><img src='{{ 'newsletter_popup_bg.png' | asset_url }}'></div>{% endif %}
<h2><span>{{settings.newsletter_text}}</span></h2><p class='newsletter-subheading'>{{settings.newsletter_description}}</p>
{% if settings.newsletter_popup_form %}
<div class="mailing-list newsletter">
{% if settings.footer-headers %}
<h4 class="section-title">{{ settings.mailing-list-title }}</h4>
{% endif %}
{% if settings.mailing-list-platform == 'mailchimp' or settings.mailing-list-platform == 'campaign-monitor' %}
<form action="{{ settings.mailing-list-action-url }}" method="post" name="{% if settings.mailing-list-platform == 'mailchimp' %}mc-embedded-subscribe-form{% endif %}" id="mc-embedded-subscribe-form" class="validate contact-form" target="_blank" novalidate>
{% if settings.mailing-list-platform == 'mailchimp' %}
<input id="mce-EMAIL" class="mailing-list-email" name="EMAIL" type="email" placeholder="[email protected]" value="">
{% endif %}
{% if settings.mailing-list-platform == 'campaign-monitor' %}
<input id="fieldEmail" class="mailing-list-email" name="{{ settings.campaign-monitor-name }}" type="email" placeholder="{{ 'general.general.email_placeholder' | t }}" required />
{% endif %}
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;display:none;" aria-hidden="true"><input type="text" name="b_4c740f62a8e9d9506999fa2c7_00327ea4db" tabindex="-1" value=""></div>
<div class="mailing-list-submit">
<input class="submit" name="subscribe" type="submit" id="mc-embedded-subscribe" value="">
</div>
</form>
<!--<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);</script>-->
{% else %}
{% form 'customer' %}
<input class="mailing-list-email" name="contact[email]" type="email" placeholder="[email protected]" value="">
<input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
<div class="mailing-list-submit">
<input class="submit" name="subscribe" type="submit" value="{{ 'layout.footer.newsletter_subscribe' | t }}">
</div>
{% endform %}
<div class="modal-wrapper modal-mailing-list">
<div class="modal">
<h3 class="section-title">{{ settings.mailing-list-modal-title }}</h3>
<p>{{ settings.mailing-list-modal-description }}</p>
<span class='button dismiss'>{{ settings.mailing-list-modal-button-text }}</span>
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
<script type="text/javascript">
function openNewsletterPopup() {
{% if settings.newsletter_popup_page != blank %}
$.get("/pages/{{ settings.newsletter_popup_page }}.json", function(data) {
$("#target").prepend("<h2>{{settings.newsletter_text}}</h2><p class='newsletter-subheading'>{{settings.newsletter_description}}</p>" + data["page"]["body_html"]);
});
{% endif %}
setTimeout(function() {
$('#newsletter').fancybox({maxWidth: {% if settings.newsletter_popup_max_width != blank %}{{ settings.newsletter_popup_max_width }}{% else %}600{% endif %}});
$('#newsletter').trigger('click');
},
{% if settings.newsletter_popup_seconds != blank %}{{ settings.newsletter_popup_seconds }}{% else %}2{% endif %}*1000);
}
$(function() {
var popup = $.cookie('popup');
var cookie_enabled = {% if settings.newsletter_popup_days != blank and settings.newsletter_popup_days != "0" %}true{% else %}false{% endif %};
if (cookie_enabled && popup == 'open') {
return false;
} else {
openNewsletterPopup();
}
if (cookie_enabled) {
$.cookie('popup', 'open', { expires: {{ settings.newsletter_popup_days }} });
}
});
</script>
{% endif %}我工作在通訊彈出使用的fancybox工作。
設置是移動響應，但是當它爲移動設備縮放時，背景圖像會失真。我是一名設計師 - 而不是編碼員 - 但足以在Shopify後端對html或css表格進行微小更改。
是否有人會知道Fancybox腳本中我應該在哪裏看/我應該包括/不包括解決這個問題？
圖像被附上。
非常感謝， Svee
在這裏發表代碼 – mlegg
@mlegg code here： – Svee