Ein Javascript-Popup-Fenster auf shopify

Question

stylen Ich würde wirklich einige Hilfe mit diesem zu schätzen wissen - ich bin nicht wirklich ein Entwickler/Programmierer, nur irgendwie endete dies bei der Arbeit zu tun!

Ich brauche ein Popup, um einen Rabattcoupon nur für die Besucher aus Kanada anzuzeigen. Der erste Schritt bestand darin, ein Skript zu entwickeln, um diese Besucher zu identifizieren, was ich auch tat. Mein Wissen über JS ist jedoch sehr begrenzt, also habe ich open.window für das Popup verwendet, das mir nicht wirklich erlaubt, das Fenster zu stylen. Ich möchte, dass das Popup wie ein fancybox-Popup aussieht, aber nicht zum shopify-Theme hinzugefügt werden kann (versucht und nicht funktioniert).

Alle Ideen würden sehr geschätzt werden. Vielen Dank.

Hier ist der Code:

<script> 

jQuery.ajax({ 
url: 'https://api.wipmania.com/jsonp?callback=?', 
type: 'POST', 
dataType: 'jsonp', 
success: function(location) { 

if (location.address.country === 'Canada') { 

    window.open("","","width=300, height=100"); 
} 
} 
}); 

</script> 

Answer 1

kann ich Sie vorschlagen, süß alert das ist wirklich einfach zu bedienen und die Art der fabelhaften vor Ende einen Blick gemacht zu nutzen: den süßen Alarm

1) herunterladen zip und extrahiere es.

2) Überprüfen Sie den Ordner dist und verschieben Sie die Datei .min.js und die CSS-Datei in Ihr Projekt.

3) verwenden Sie sie wie in der Dokumentation here definiert.

4) Sie zum Beispiel es ist eine Art

<script> 

jQuery.ajax({ 
url: 'https://api.wipmania.com/jsonp?callback=?', 
type: 'POST', 
dataType: 'jsonp', 
success: function(location) { 
if (location.address.country === 'Canada') { 
    swal("confrats you choosed Canada"); 
} 
} 
}); 

</script> 

sein wird, hoffen, dass es ein wenig NB geholfen: Vergessen Sie nicht, die CSS-Datei zuerst und die JS-Datei

Answer 2

JavaScript

zu laden

<script> 

jQuery.ajax({ 
url: 'https://api.wipmania.com/jsonp?callback=?', 
type: 'POST', 
dataType: 'jsonp', 
success: function(location) { 

if (location.address.country === 'Canada') { 

if(localStorage.getItem('myModal') != 'shown'){  
var modal = document.getElementById('myModal'); 
localStorage.setItem('myModal','shown') 
} 

var span = document.getElementsByClassName("close")[0]; 

window.onload = function() { 
modal.style.display = "block"; 
} 

span.onclick = function() { 
modal.style.display = "none"; 
} 

window.onclick = function(event) { 
if (event.target == modal) { 
modal.style.display = "none"; 
} 
} 

} 
} 
}); 

</script> 

HTML: 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<a href="#close" title="Close" class="close">&nbsp;&#10006;&nbsp;</a> 
<img src="img.jpg" style="padding-top:20px;"> 
</div> 

</div> 

CSS:

/* The Modal (background) */ 
.modal { 
display: none; /* Hidden by default */ 
position: fixed; /* Stay in place */ 
z-index: 1; /* Sit on top */ 
left: 0; 
top: 0; 
width: 100%; /* Full width */ 
height: 100%; /* Full height */ 
overflow: hidden; /* Enable scroll if needed */ 
background-color: rgb(0,0,0); /* Fallback color */ 
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content/Box */ 
.modal-content { 
background-color: #fefefe; 
margin: 15% auto; /* 15% from the top and centered */ 
text-align: center; 
width: 440px; /* Could be more or less, depending on screen size */ 
height: 440px; 
position:relative; 

} 

/* The Close Button */ 
.close { 
color: white; 
font-size: 20px; 
font-weight: normal; 
font-family: arial black; 
background-color: grey; 
border-radius: 50%; 
position: absolute; 
right: -18px; 
top: -18px; 
border: 2px solid white; 
} 

.close:hover, 
.close:focus { 
color: black; 
text-decoration: none; 
cursor: pointer; 
}