Search code examples
jqueryruby-on-railstwitter-bootstrapflatui

modal does not open because of flat-ui


I want to use flat-ui from designmodo free version 2.2.2. But I found that documents that related to include Flat-UI into rails are out of date. So I download the package and include it by

<link href="/Flat-UI-2.2.2/dist/css/flat-ui.css" rel="stylesheet">
<script src="/Flat-UI-2.2.2/dist/js/flat-ui.min.js"></script>

including these codes.
So it works fine in my project except my modal. My modal turns on, but turns off right away. So I'm searching about this problem, and found that this problem is related to include bootstrap twice(or maybe Flat-ui twice).
So I include that code just in my application.html.erb once or just include that code page by page, But can't solve it.
Can anybody help me? My project code is on
https://ide.c9.io/hcn1519/modalra#openfile-README.md


My problem demo is on http://modalra-hcn1519-1.c9.io/ here.


Solution

  • Reason modal open and instantly closed because 2 JS libraries handling the modal open request,

    Fiddle With Problem

    <script src="/assets/bootstrap/modal.self-bcfe54f3132bf16a8c5ce4289e47eba488f6522a08f49f378a037061c6c7aa4c.js?body=1" data-turbolinks-track="true"></script>
    

    and

    <script src="/Flat-UI-2.2.2/dist/js/flat-ui.min.js"></script>
    

    So remove one and will fix the issue. I suggest remove

    <script src="/assets/bootstrap/modal.self-bcfe54f3132bf16a8c5ce4289e47eba488f6522a08f49f378a037061c6c7aa4c.js?body=1" data-turbolinks-track="true"></script>
    

    Working Modal Fiddle