在 shopify 上设置JavaScript弹出窗口的样式
Styling a javascript popup window on shopify
我真的很感激这方面的帮助 - 我不是真正的开发人员/程序员,只是在工作中结束了这个!
我需要一个弹出窗口来仅向来自加拿大的游客显示折扣券。第一步是找出一个脚本来识别这些访问者,我做到了。我对JS的了解非常有限,所以我使用open.window作为弹出窗口,这实际上不允许我设置窗口样式。我希望弹出窗口看起来像一个花哨的弹出窗口,但无法将其添加到 shopify 主题(尝试过但不起作用)。
任何想法将不胜感激。非常感谢。
代码如下:
<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>
我可以建议你使用甜蜜的警报,它真的很容易使用,而且前端看起来很棒:
1)下载甜蜜的警报zip并解压缩它。
2 ) 检查 dist 文件夹并将 .min.js 和 CSS 文件移动到您的项目中。
3 ) 按照此处文档中的定义使用它们。
4)以你为例,这将是
<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>
希望它有所帮助注意:不要忘记先加载css文件和JS文件
JavaScript
<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"> ✖ </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;
}
相关文章:
- 我可以在FullCalendar中设置事件ClickLimit弹出窗口的样式吗
- Javascript em根据窗口/视口尺寸调整大小,不影响文档样式的text/css
- 使用JavaScript更改带有窗口高度的元素样式
- 在 shopify 上设置JavaScript弹出窗口的样式
- 自定义/样式提示窗口
- 动态为不同大小的浏览器窗口应用不同的样式表
- 在样式模式 (jQuery UI) 窗口中显示 JS 警报
- 打开一个新的javascript窗口(.open)及其CSS样式
- 如何使PHP/JavaScript错误弹出窗口以正确的样式显示
- extjs 窗口项样式
- 如何在提交按钮上设置javascript弹出确认窗口的样式
- 如何在改变窗口宽度时重新加载css样式?
- 如何创建一个不规则的(不是矩形的)工具样式的弹出窗口
- 如何保持Javascript自定义下拉/弹出窗口和类似的交互打开,而样式化它
- AngularUI弹出窗口样式改变父元素点击
- 使用bxslider破坏断点样式调整窗口大小
- 是否可以使用javascript应用随机窗口大小的媒体查询样式
- 使用Javascript为弹出窗口应用css样式
- JS:打开样式窗口
- 如何获得此弹出窗口样式