Disable class when closing modal

Asked

Viewed 701 times

1

I have the following JS for my modal:

<script type="text/javascript">
    $('#modal').modal('hide');
    $('.linkModal').on('click', function(event){
        event.preventDefault();
        var title = ($(this).attr("title"));
        if($(this).attr('modalSize')){
            var modalSize = $(this).attr('modalSize');
        }
        $('#modal .modal-body, #modal .modal-title').empty();
        $.ajax({
            url: $(this).attr("href"),
            type: 'GET',
            context: $('#modal'),
            success: function(data){
                if(modalSize){
                    $('#modalDialog').addClass(modalSize);
                }
                $("#modal .modal-title").append(title);
                $("#modal .modal-body").append(data);
                $('#modal').modal('show');
            }
        });
    });
    $('#modal').on('hide.bs.modal', function () {
      $('#modalDialog').removeClass('modal-lg'); //QUERO REMOVER ESTA CLASSE do ID="modalDialog". Como fazer?
    });

    $(".chosen-select").chosen();
</script>

I want to remove the class modal-lg of ID="modalDialog" when to close the modal. How to do it? The way I did it is not working.

twitter-bootstrap bootstrap-3

1 answer

2

I made an example here and everything works normal. Follow my example.

 $(function () {
            $('#modalDialog').on('hidden.bs.modal', function () {
                $("#modalDialog").removeClass("modal-lg");
                alert("Fechou.");
            });
        });
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>
<body>
    <div id="modalDialog" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                   <h1>Teste</h1>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                </div>
            </div>

        </div>

    </div>
    <button type='button' class='btn btn-primary' data-toggle='modal' data-target='.bs-example-modal-lg'>Visualizar</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>

Browser other questions tagged twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.