We Keep Coding

how to pop up a modal upon putting the cursor in a textarea

I have a small textarea, and as the user puts the cursor inside it, I want a modal to popup as a larger version of this textarea.
I prepared all code, but couldn't find the part of putting the cursor in the textarea to populate the modal.
Textarea :
<textarea href ="#s-fb" class="form-control" name="sfb" id="sfb" rows="2" value="" placeholder="We would appreciate your feedback to improve the website"></textarea>
Modal :
<div class="modal fade" tabindex="-1" role="dialog" id="s-fb">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
...
...

Please try this one.
$('#sfb').click(function(){
$('#s-fb').modal('show')
})
Hope this helps.

Use onmouseover event to trigger an event when the mouse is placed over the textarea.
onmouseover="showModal()"
function showModal(){
document.getElementById('s-fb').style.display = 'block';
}

You want to use the onmouseover function for your text input. Something like this will work:
<input type="text" onmouseover="$('#exampleModal').modal('show')">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

TinyMCE in modal, modal won't reopen after passing data to div

I'm currently running an HTML template that has a placeholder div, and when the user clicks inside the div, a modal pops up with an instance of TinyMCE. So far so good.
TinyMCE works here as far as adding text/content, and then you hit a button that closes the modal and passes the content into the placeholder div in the same format. (Think of it like the user viewing a template for a static page, they want to insert content so the modal allows them to use TinyMCE to do so and then they hit the button to view it in the 'live' template).
Anyway, this works fine. The problem is, if you notice an error or typo and need to call TinyMCE again, It won't work. Once the content passes to the div, it no longer triggers the modal when clicking in the div. I'm not a JavaScript expert by any means so I'm sure something is wrong on that side.
Here's the code. Everything works as expected, but I just need to be able to keep the action of clicking the div and loading the modal to edit the content from TinyMCE:
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var $modalFull = $('#fullModal').modal({
show: false
});
$('.fullWidth').on('click', function() {
$modalFull.modal('show');
});
$(document).ready(function() {
$("#form-data3").submit(function(e) {
var content3 = tinymce.get("mytextarea3").getContent();
$(".fullContent").html(content3);
jQuery.noConflict();
$('#fullModal').modal('hide');
$('.modal-backdrop').remove();
return false;
});
});
</script>

With $(".fullContent").html(content3);, you are overwriting the modal's markup.
Place it outside that div.
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>

How to display different content on a modal based on data-binding attribute? (knockout.js + bootstrap modal)

What I want to do is, I want to display a modal when I click the "Preview Application" link based on the data-binding of the link.
For example,
<a href="#" data-toggle="modal" data-target="#previewApplicantModal" data-bind="attr: { 'data-applicationKey': application.applicationKey }">
Preview Application
</a>
When I do this, it binds to the corresponding applicationKey. So, I want to use this information to display the corresponding candidateLocation on the modal based on the applicationKey.
How can I do this?
To rephrase my question,
How can I make the modal read the applicationKey and display the candidateLocation that is inside the same "application" object as that applicationKey?
The code for my empty modal currently looks like this:
<div id="previewApplicantModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Applicant Preview</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<span>Applicant Responses</span>
</div>
<div class="col-md-6">
<div>
</div>
</div>
</div>
<div class="row small-margin-top" style="text-align:center">
Read Full Profile
</div>
</div>
</div>
</div>

slimScroll- doesn't work good in the second modal

I have 2 modals (when the first is close the second is open) the code of the first modal in a template (gsp) and the of the second one is in the view page
The code I use for close the first and open the second is:
function openModal(){
if($('.invitePartners').valid()){
$('.invite-contacts-modal').modal('hide')
$('.modal-backdrop').remove();
$('#mySecModal').modal();
}
The html for the second modal:
<div class="modal fade" id="mySecModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog signup-modal">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title light-green"><g:message code="signup.redesign.invitepartners.modal.title"/></h4>
</div>
<div class="modal-body">
<g:message code="signup.redesign.invitepartners.modaldetails.header"/><br><br>
<span>${user?.firstname}</span><span> ${user?.lastname} </span><g:message code="signup.redesign.invitepartners.modaldetails.body"/>
</div>
<div class="modal-footer">
<g:message code="buttons.dontsend"/>
<button name="next" class="signup-button skyblue-btn pull-right pl-pr-36" >${message(code:"buttons.ok")}</button>
</div>
</div>
</div>
</div>
In the first modal the scroll works fine.
I the second modal the user can scroll until he get to the end of the modal (which is cut).
I use scrollSlim plugin

href and bootstrap modal

I am trying to implement a modal functionality with an application and I am bit stuck.
use case: On an user's dashboard they are bunch of links for the various applications. When user tries to access those link, a modal with terms and condition should pops and when the user accepts the condition then a new windows should open depending on the application link user selected. These links are dynamic and generated on UI based on database.
Non modal implementation:
<div class="col-xs-12" nopadding>
<ul class="nopadding padded-side-20">
<c:forEach var="app" items="${appAndLink}">
<li>${app.key}</li>
</c:forEach>
</ul>
</div>
Modal Implementation:
<c:forEach var="app" items="${appAndLink}">
<li>${app.key}</li>
</c:forEach>
<div class="modal fade" id="myModalAccessApp" tabindex="-1" role="dialog" aria-labelledby="myModalAccessAppLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header nopadding padded-side-20 padded-tb-10">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalAccessAppLabel">
Systems Use Notification
</h4>
</div>
<div class="row">
<div class="col-lg-12 gray-divider"></div>
</div>
<div class="modal-body" id ="modalID">
<p> Terms and condition </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" onclick="openJSWindow('${app.value}', '${app.key}', true)" data-dismiss="modal">
I Accept
</button>
<button type="button" class="btn btn-success"
data-dismiss="modal">Cancel
</button>
</div><!-- /.modal-footer -->
</div>
</div>
</div> <!-- /.modal-Ends -->
</ul>
</div>
I am not able to pass the ${app.value}, ${app.key} value to the modal which I have created. Kindly let me know if this can be done with jQuery or AJAX. I have very limited knowledge on these.
Thank you for the help.