CODEWITHSUNDEEP
javascriptjquerymodal-dialog
Lebone
Lebone

Reputation: 503

Javascript - Function not defined

I have a modal dialog and I'm trying to use javvascript's onClick function to close it, but it says 'closeModal not defined'.

Here is my html for the modal:

<div id="popup" class="modal-box">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Registration</h4>
    </div>
    <div class="modal-body">
        <p>Modal Body</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeModal()">Close</button>
    </div>
</div>

and here is my javascript:

<script type="text/javascript">
    $(function closeModal() {
        $('#popup').modal('hide');
    });
</script>

I fail to understand why it says undefined because the function and onClick have the same name(closeModal) and i referenced #popupin my function to close the whole modal.

Upvotes: 0

Views: 683

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77482

closeModal should be in global scope, $(function (){}) is shorthand for $(document).ready(function() {}) 

function closeModal() {
  console.log(this);
  // $('#popup').modal('hide');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" class="modal-box">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Registration</h4>
    </div>
    <div class="modal-body">
        <p>Modal Body</p>
    </div>
    <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeModal()">Close</button>
    </div>
</div>

Also if you use jQuery you don't need use inline events you can change your example like this

$(function () {
  $('.js-close-modal').on('click', function () {
     console.log(this);
    // your code 
  });
})
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup" class="modal-box">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Registration</h4>
  </div>
  <div class="modal-body">
    <p>Modal Body</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default js-close-modal" data-dismiss="modal">Close</button>
  </div>
</div>

Upvotes: 1

Related Questions