Image Modal Popup

Solved
Highlighted
Tourist
6 1 2

Hi, I'm just trying to do a simple modal popup similar to - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal 

So when I click a link it will popup and I can input an image and any details I want. But shopify seems to make this hard by either auto correcting any html I do or the href="#" goes to the homepage automatically. Also the javascript I put in the header of my theme.liquid doesn't seem to load? I'm at a loss here anyone have experience with doing a simple modal popup with a link click?

0 Likes
Highlighted
Shopify Partner
1023 214 464

@Patrick39 

 

Please share your store URL so I can take a look and assist you better.

 

Thanks,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
Highlighted
Highlighted
Tourist
6 1 2
0 Likes
Highlighted
Shopify Partner
1023 214 464

@Patrick39 

 

Thank you for sharing store URL. Now, can you please explain more? where exactly you want add modal popup in your store?

Also let me know, what you have did to implement for this popup?

If possible then share login details to my mail so I can help you implement the same popup in your store.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
Highlighted
Tourist
6 1 2

This is an accepted solution.

@Tejas_Nadpara 

 

I've actually figured it out myself, I wasn't doing 

window.onload = function(){ 

before the javascript. 

 

Thanks for Helping though!!

0 Likes
Highlighted
Shopify Partner
5 0 1

Hi 

 


@Patrick39 wrote:

Hi, I'm just trying to do a simple modal popup similar to - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal 

So when I click a link it will popup and I can input an image and any details I want. But shopify seems to make this hard by either auto correcting any html I do or the href="#" goes to the homepage automatically. Also the javascript I put in the header of my theme.liquid doesn't seem to load? I'm at a loss here anyone have experience with doing a simple modal popup with a link click?


 

0 Likes
Highlighted
Tourist
6 1 2
@mohamed001 wrote:

Hi 

 

Sure!

 

JS File

 

window.onload = function(){ 

// Get the modal

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var headermodaltext = document.getElementById("headerforfabric");  
// When the user clicks the button, open the modal 
 if (typeof(btn) != 'undefined' && btn != null){
btn.onclick = function() {
  modal.style.display = "block";
}
  }

// When the user clicks on <span> (x), close the modal
 if (typeof(span) != 'undefined' && span != null){
span.onclick = function() {
  modal.style.display = "none";
}
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    
  
  if (event.target == modal) {
    if (typeof(modal) != 'undefined' && modal != null){
    modal.style.display = "none";
  }
  }
  
}

 

HTML

<!-- The Modal -->
<div id="myModal" class="modal"><!-- Modal content -->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span>
<h2>Fabric Covers</h2>
</div>
<div class="modal-body">
<!-- content -->
</div>
</div>
</div>

 

 

CSS

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 801; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* 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 */
.modal-content {
  position: absolute;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.5s;
  animation-name: animatetop;
  animation-duration: 0.5s;
  top: 40%;
  max-width: 800px;
  left: 0;
  right: 0;
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top: -4px;
}

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

.modal-header {
  padding: 2px 16px;
  background-color: #039fb5;
  color: white;
}
.modal-header h2{
 
  color: white !important;
}

.modal-body {
  padding: 2px 16px;
  max-height: 400px;
  overflow-y: auto;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body tbody th, tbody td {
    
    border: black 1px solid;
}

 

Let me know if you have any questions

2 Likes
Highlighted
Shopify Partner
5 0 1

Thank you so much 


@Patrick39 wrote:
@mohamed001 wrote:

Hi 

 

Sure!

 

JS File

 

window.onload = function(){ 

// Get the modal

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var headermodaltext = document.getElementById("headerforfabric");  
// When the user clicks the button, open the modal 
 if (typeof(btn) != 'undefined' && btn != null){
btn.onclick = function() {
  modal.style.display = "block";
}
  }

// When the user clicks on <span> (x), close the modal
 if (typeof(span) != 'undefined' && span != null){
span.onclick = function() {
  modal.style.display = "none";
}
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    
  
  if (event.target == modal) {
    if (typeof(modal) != 'undefined' && modal != null){
    modal.style.display = "none";
  }
  }
  
}

 

HTML

<!-- The Modal -->
<div id="myModal" class="modal"><!-- Modal content -->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span>
<h2>Fabric Covers</h2>
</div>
<div class="modal-body">
<!-- content -->
</div>
</div>
</div>

 

 

CSS

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 801; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* 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 */
.modal-content {
  position: absolute;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.5s;
  animation-name: animatetop;
  animation-duration: 0.5s;
  top: 40%;
  max-width: 800px;
  left: 0;
  right: 0;
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top: -4px;
}

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

.modal-header {
  padding: 2px 16px;
  background-color: #039fb5;
  color: white;
}
.modal-header h2{
 
  color: white !important;
}

.modal-body {
  padding: 2px 16px;
  max-height: 400px;
  overflow-y: auto;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body tbody th, tbody td {
    
    border: black 1px solid;
}

 

Let me know if you have any questions


 

0 Likes
Highlighted
Tourist
3 0 1

Hi guys,

 

could you please take a look at the steps I´m doing. I´m struggling hard getting this modal wo work:

 

1. create modal.js file und insert your js-code and include this to theme.liquid:

{{ 'modal.js'  | asset_url | script_tag     }}

what is the script-tag?

 

2. insert your html in product-template.liquid

that´s it? if i want to insert a link which opens the modal how do I refer to it?

 

3. insert your css in theme.scss.liquid

1 Like