Issue with the time with fadeIn

I’m trying to use fadeIn to show modals. It works, the modal is showed when clicking, but not with the time indicated.

<script>
            var modal = $('#produccion, #planificacion');
            var btn = $('#prod, #plani');
            var span = document.getElementsByClassName("close")[0];

            $('.boton').click(function(){
                var id = $(this).attr('data-modal');
                $("#"+id).fadeIn(10000);
                return false;
            });

            $(".close").click(function(){
                    $(this).parent().parent().css('display','none');
            })

            $('span').click(function() {
                modal.css('display','none');
            });
            $(".modal").click(function(event) {
                    $(this).css('display','none')
            })

        </script>

Thanks in advance for your help