Topic: How to open modal from right side
BizRTC pro asked 5 years ago
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 ?
Add comment
Piotr Glejzer staff answered 5 years ago
Hi,
there was a bug on our website. Sorry about that. I fixed that. This modal is working now.
Here is a fast example -> Link
Best,
Piotr
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.15
- Device: Windows
- Browser: Chrome
- OS: Windows
- Provided sample code: Yes
- Provided link: Yes