How to open modal from right side

Modal examples & templates

Hi,

I was looking at this document:

https://mdbootstrap.com/docs/jquery/modals/additional/#modalPollSec

Now I tried to use the Modal Poll.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll">Launch modal</button>

<div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Feedback request
</p>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>

<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fa fa-file-text-o fa-4x mb-3 animated rotateIn"></i>
<p>
<strong>Your opinion matters</strong>
</p>
<p>Have some ideas how to improve our product?
<strong>Give us your feedback.</strong>
</p>
</div>

<hr>

<!-- Radio -->
<p class="text-center">
<strong>Your rating</strong>
</p>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-17" value="option1" checked>
<label class="form-check-label" for="radio-17">Very good</label>
</div>

<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-27" value="option2">
<label class="form-check-label" for="radio-27">Good</label>
</div>

<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-37" value="option3">
<label class="form-check-label" for="radio-37">Mediocre</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-47" value="option4">
<label class="form-check-label" for="radio-47">Bad</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" name="group1" type="radio" id="radio-57" value="option5">
<label class="form-check-label" for="radio-57">Very bad</label>
</div>
<!-- Radio -->

<p class="text-center">
<strong>What could we improve?</strong>
</p>
<!--Basic textarea-->
<div class="md-form">
<textarea type="text" id="form7textarea" class="md-textarea form-control" rows="3"></textarea>
<label for="form7textarea">Your message</label>
</div>

</div>

<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary waves-effect waves-light">Send
<i class="fa fa-paper-plane ml-1"></i>
</a>
<a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>


Now when I try this in my project. I just displays the modal at bottom of the page, instead of showing it when I click on the button.
Also it should be positioned right corner but instead it stays at bottom center.

What am I missing ?