CODEWITHSUNDEEP
javascriptjqueryhtml
Malvyn
Malvyn

Reputation: 23

Textarea open a pop-up when click using jQuery

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?

Upvotes: 0

Views: 2154

Answers (2)

Andrew Brooke
Andrew Brooke

Reputation: 12153

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>

Upvotes: 0

kzhao14
kzhao14

Reputation: 2630

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>

Upvotes: 1

Related Questions