Jake Evans Jake Evans - 6 months ago 30
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
</button>

<!-- 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>
<div class="modal-body">
...
</div>
<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>
</div>
</div>
</div>
</div>


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?

Thanks

Answer

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