Hi Christian,
Thank you for your quick response, even on a Sunday - impressive!
Unfortunately the solution provided didn't work probably because I only provided some of the code or what was required in my mind to make my solution to work. Here is the overall code of the view and link to the page that I am trying to do.
1) Ideally the read more button should be an link like in your example
2) Need to use the [wpv-post-id] to create a unique modal box for each Read more... and be able to pass that dynamic content to the Java var modal
3) It doesn't have to be this solution as long as I get the same behaviour. So feel free if you have a better solution.
4) test webpage: hidden link
5) Got the code from here: hidden link
Thanks for your help with this matter,
Phil
HTML
!-- wp:html -->
<div class="prg-time">
<h6>[types field='time'][/types]</h6>
</div>
<div class="prg-text">
<h4><span style="color: #b22222;">[wpv-post-title]</span></h4>
<h6 class="presenter">[types field='presenter'][/types]</h6>
<p class="company">[types field='company-name'][/types] ([types field='country-name'][/types])</p>
</div>
[wpv-conditional if="( '[wpv-post-body view_template='None']' ne '' )"]
<button id="myBtn">Read more...</button>
[/wpv-conditional]
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h4><span style="color: #b22222;">[wpv-post-title]</span></h4>
<h6 class="presenter">[types field='presenter'][/types]</h6>
<p>[wpv-post-body view_template='None']</p>
<p>Some text in the Modal..</p>
</div>
</div>
<!-- /wp:html -->
JAVA
// 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];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
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) {
modal.style.display = "none";
}
}
CSS
h6.presenter {
margin-top: 1em;
}
p.company {
margin-top: -0.5em;
font-size: 14px;
}
#main-content .container {
padding-top: 10px;
/* 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: 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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
