Jake Evans Jake Evans - 1 year ago 138
Javascript Question

FuelUX Modal overriding Bootstrap Modals

I am using fuelux 2.4.0 and Bootstrap 3.1.1.

I have used the code provided by Bootstrap to provide a popup modal;

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
<div class="modal-body">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>

However the FuelUX CSS is being used, and it is making the popup all wrong and distorted.

Anyway to disgreard FuelUX and use the BS CSS instead?


Answer Source

Sorted it by removing class="fuelux from the body style :)