On click of a send button will trigger a function and the modal dialog is not fading out

Question

I have tried couple of ways in jQuery for fading out a modal dialog. Please see what I have got

A sendMessage button with a text area.

<div class="sendmessage">
    <textarea class="form-control" rows="2"></textarea>
    <br>
    <button onClick="infoAlert();" type="button" id="sendMessage" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send Message</button>
</div> 

On click of the send button will call a JavaScript function infoAlert() and the jQuery fading out function is called with in that. The fading out is not happening at all.

My jsfiddle is here . Could some help to figure out the problem?

function infoAlert(){
    $(document).ready (function(){
        $("sendmessage").click(function(){  
            $("#myModal").show();
            $("#myModal").fadeOut('slow', 0, function(){
                $("#myModal").dialog('close');
            });
        });
    });
}

] [1]:

Answer 1

If you opened up your browser debugger console, you will see that there is an error saying:

Uncaught ReferenceError: infoAlert is not defined

Basically, your infoAlert() function needs to be defined within your $(document).ready like this:

$(document).ready (function(){
  function infoAlert(){
    $("sendmessage").click(function(){  
      $("#myModal").show();
      $("#myModal").fadeOut('slow', 0, function(){
        $("#myModal").dialog('close');
      });
    });
  }
});

You can read more about the $.ready() function here .

Since you have already specified the data-toggle="modal" and data-target="#myModal" HTML attributes, you don't need any javascript to achieve the same effect. Take a look at this updated fiddle with all the Javascript removed.

Also, note that in your original fiddle, you don't need to use both Bootstrap 3.2.0 and Bootstrap 2.3.2.

Answer 2

The first thing I saw in fiddle is you chose 2 bootstrap js files, which will cause the conflict. So, you have to choose one of them, not both.

The second thing is $("sendmessage").click(function(){}). It should be $('.sendmessage').

The third one is your code does not make any sense when you call div#myModal show then hide it. Bootstrap js should take care all the modal show and hide action.