Our team is in the process of developing a text analyzer tool to review emails before sending them out. The goal is to involve all team members in selecting the best emails to send to clients:
Implemented the following HTML code:
<p class="sentence" href="#">Lorem ipsum dolor, adipisicing elit.</p>
<div class="popup-inner" data-popup="popup-1" hidden="hidden">
<input type="radio" name="gender" value="like" checked> Like<br>
<input type="radio" name="gender" value="dislike"> Dislike<br>
<input type="radio" name="gender" value="other"> Other
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
Code used to execute it:
var sentence = $('.sentence').html().split(/\s+/),
result = [];
for( var i = 0; i < sentence.length; i++ ) {
result[i] = '<span class="keyword-btn" data-popup="' + i + '">' + sentence[i] + '</span>';
}
$('.sentence').html(result.join(' '));
$('.sentence').on('click', 'span', function(){
$(this).addClass('highlight');
});
function showPopup(span, $popup) {
var offset = span.offset();
$popup
.fadeIn(350)
.css({
left: Math.min(offset.left, $(window).innerWidth()-$('.questions').outerWidth()) + 25,
top: offset.top + 50
});
}
$(function() {
//----- OPEN
$('span.keyword-btn').on('click', function(e) {
//var targeted_popup_class = jQuery(this).attr('data-popup-open');
//$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
showPopup($(this), $('div.popup-inner'));
e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
Added CSS styling:
.sentence span:hover, .highlight{
color: rgb(58, 207, 222);
cursor: pointer;
}
/* Close Button */
.popup-close {
width:30px;
height:30px;
padding-top:4px;
display:inline-block;
position:absolute;
top:0px;
right:5px;
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
border-radius:1000px;
background:rgba(0,0,0,0.8);
font-family:Arial, Sans-Serif;
font-size:20px;
text-align:center;
line-height:100%;
color:#fff;
}
.popup-close:hover {
-webkit-transform:translate(50%, -50%) rotate(180deg);
transform:translate(50%, -50%) rotate(180deg);
background:rgba(0,0,0,1);
text-decoration:none;
}
Struggling to display radio buttons below selected words. Any assistance would be appreciated.