When I feed in

 Modal.show("experimentMakeAnOffer");

in the Chrome browser console, my modal slides in diagonally from the left. How do I get my modal to slide in horizontally (in a straight line) from the left instead?

I have tried researching on how to level the modal (while hidden/before being called) using CSS, but no luck. Any help is appreciated.

Below my modal in template:

 <template name="experimentMakeAnOffer">
    <div class="modal fade left" id= "experimentMakeAnOffer2">
        <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title">experimentMakeAnOffer  </h4>                </div>
            <div class="modal-body experimentMakeAnOffer">           
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary submitOffer btn-lg" data-dismiss="modal">Offer</button>
            </div>

        </div>
    </div>
</div>

My CSS:

.modal.fade:not(.in).left .modal-dialog {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}

When I feed in

 Modal.show("experimentMakeAnOffer");

in the Chrome browser console, my modal slides in diagonally from the left. How do I get my modal to slide in horizontally (in a straight line) from the left instead?

I have tried researching on how to level the modal (while hidden/before being called) using CSS, but no luck. Any help is appreciated.

Below my modal in template:

 <template name="experimentMakeAnOffer">
    <div class="modal fade left" id= "experimentMakeAnOffer2">
        <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title">experimentMakeAnOffer  </h4>                </div>
            <div class="modal-body experimentMakeAnOffer">           
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary submitOffer btn-lg" data-dismiss="modal">Offer</button>
            </div>

        </div>
    </div>
</div>

My CSS:

.modal.fade:not(.in).left .modal-dialog {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}

• javascript
• css
• meteor
• bootstrap-modal

• What is the css for the modal-dialog (without the .fade)? The reason I ask is because translate3d(-25%, -20%, 0) means its sliding the modal 25% right, 20% down so its already starting in the top left of the page. – Pat Commented Oct 18, 2016 at 16:14
• @Pat Sorry Pat that was a typo that has been corrected. The way it is in my CSS code is: .modal.fade:not(.in).left .modal-dialog { -webkit-transform: translate3d(-25%, 0, 0); transform: translate3d(-25%, 0, 0); } But it still slides in diagonally. – SirBT Commented Oct 18, 2016 at 16:28

2 Answers 2

Hello check the below updated Fiddle where I changed your code and showed it another way Hope it helps You .

.modal.left .modal-dialog
{
position: fixed;
margin: auto;
width: 500px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content
{   
margin-top:40%;
height: 50%;
width:100%;
overflow-y: auto;
}   
.modal.left.fade .modal-dialog{
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog{
left: 0;
}

Left side Modal Updated Fiddle

The translate3d property accepts (X, Y, Z, angle) property.

On your CSS the statement is inconsistent, because first you set the Y for 20% on -webkit-transform and then you set it to 0% on transform, the browser will only get the last valid argument, so for instance on Chrome the .model-dialog will be rendered 0 on Y.

But regarding your question to show from the left you need to change the X position and not the Y position of your translate.

Check this fiddle for an quick demo