使用JQuery激活Bootstrap警报

Question

I'm new to JQuery and my problem is that I have a button in a modal such that when I click it, a JQuery script is run. I need this script to show an alert box.

The code:

<div id="formAlert" class="alert alert-warning hide">
    Please enter your    
</div>

The above is inside the modal.

    <script type="text/javascript">

        $(document).ready(function (){

            $("#submitMe").click(function(){
                $("#formAlert").show();
            });

        });
    </script>

Thanks for your help!

Answer 1

First of all, you'll need to hide the alert using display: none in CSS. You're achieving that using Bootstrap's .hide class, so that should be sufficient.

Next, alert() isn't a proper function of a jQuery object. It's a function of the window object and is used to display a system alert.

You just need to use jQuery's show() function. You may also need to prevent the default action of the event (ie the submit button click) using e.preventDefault() . For example, your script should look like this:

$(function() {  
    $('#submitMe').on('click', function(e) { 
        e.preventDefault();
        $('#formAlert').show();
    });
});

Notice that we use the $(function() { }) shortcut for $(document).ready(function() { }); .