Textarea open a pop-up when click using jQuery

Question

I need to use a textarea to encourage people to comment, but before they comment they need to login or register first. I have this login/register form open using modal pop-up, by clicking url "#" with class "popup-login".

How can I make the textarea open that modal pop-up login window when clicked (using jQuery)? Any ideas?

Answer 1

Create a function that opens the modal. Then, call the function with onClick :

 function modal() { document.getElementById('textarea').value="This would open a modal window"; } 

 textarea { background-color: white; } 

 <div style="display:inline-block; position:relative;"> <textarea id="textarea" placeholder="Write a comment..."disabled></textarea> <div style="position:absolute; left:0; right:0; top:0; bottom:0;" onClick="modal()"></div> </div> 

Answer 2

Assuming you already have the click event for the .popup-login set up, this code should work fine.

// We are using focus instead of click to prevent the user from tabbing onto the comment box
$('#comment').on('focus', function() {
  $('.popup-login').click();
  // This will remove focus from the comment box
  $(this).blur();
});

Here's a full example

 $('#comment').on('focus', function() { $('.popup-login').click(); $(this).blur(); }); $('.popup-login').on('click', function() { alert('This is where the popup would be'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="popup-login">Login</a> <textarea id="comment"></textarea>