CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapbootstrap-modal
John Matters
John Matters

Reputation: 39

Can't add "transform" to css to have custom Bootstrap modal animations

I've got a button in my page. It's onclick method is this:

function showModal(){
    $(".modal.fade.in .modal-dialog").css({"transform": "translate(50px, 10px)"});
    alert($("modal.fade.in .modal-dialog").css("transform"));
    $('#mymodal').modal('show');
}

I can't figure out why the alert says undefined. I can't seem to add transform attribute. #mymodal appears without that transform.

What am I doing wrong?

Upvotes: 0

Views: 1604

Answers (2)

Tasos K.
Tasos K.

Reputation: 8079

The .in class gets added to the .modal class only after it is being opened.

When you call $(".modal.fade.in .modal-dialog").css({"transform": "translate(50px, 10px)"}); the selector returns an empty array.

You cannot make it work even if in showModal() function you called $('#myModal').modal('show'); first. That is because the .in class is added when the modal loads which takes some milliseconds due to the animation when the modal opens.

To make it work remove the .in class from your selectors

function showModal() {
    $(".modal.fade .modal-dialog").css({"transform": "translate(50px, 10px)"});
    alert($("modal.fade .modal-dialog").css("transform"));
    $('#myModal').modal('show');
}

Here is a demo in bootply. As you can see there, the CSS transformation is added when the page loads and when you click to open the modal, the alert contains the transformation that is set.

Edit: As an empirical rule, I have seen that one cannot assign transitions by setting them via the use of .css(). What I usually do is create CSS classes that have these transitions and add the class to the element I want to make it.

CSS:

.effect1.modal.fade .modal-dialog {
     transform: scale(0.1); transition: all 1s; 
}

.effect1.modal.fade.in .modal-dialog { 
    transform: translate(500px, 50px); 
}

JavaScript:

function showModal() {
    $('#myModal').addClass('effect1');
    $('#myModal').modal('show');
}

So, take a look here where I have created in CSS two effects, .effect1 and .effect2. On the button click I set the class I need and then open the modal window.

Edit2: Since what you want is to use dynamic values in x and y we need to take another approach.

The following snippet uses the shown.bs.modal and hidden.bs.modal events to set and unset (important!!) the custom CSS rule.

Another important point is to remove the .fade class from the modal because that creates a conflict.

Now, you only need to apply your logic in the getTransform() function to return any transform value you need. The use of flag is for the demo only. 

var flag = false;

function getTransform() {
  flag = !flag;
  return (flag ? "translate(500px, 50px)" : "translate(200px, 20px)");
};

$('#myModal').on('shown.bs.modal', function() {
    $("#myModal .modal-dialog").css({"transform": getTransform() });
});

$('#myModal').on('hidden.bs.modal', function() {
    $("#myModal .modal-dialog").css({"transform": "" });
});

jQuery('#open1').click(function() {
  $('#myModal').modal('show');
});

Take a look here.

Upvotes: 3

max
max

Reputation: 8667

You do not have to use JavaScript for that, CSS will do the job:

.modal.fade .modal-dialog {
  -webkit-transform: translate(50px, 10px);
      -ms-transform: translate(50px, 10px);
       -o-transform: translate(50px, 10px);
          transform: translate(50px, 10px);
}

Your code does not work because you use fade.in instead of .fade.

function showModal(){
    $(".modal.fade .modal-dialog").css({"transform": "translate(50px, 10px)"});
    $('#mymodal').modal('show');
}

Upvotes: -1

Related Questions