Bootstrap modal nepracuje správně

Zdravím,
jsem začátečník a snažím se zprovoznit bootstrap modal na menším projektu. Na hlavní stránce je vypsaná tabulka uživatelů (jméno, příjmení, datum narození, tlačítko pro editaci a tl. pro smazání). Vedle tabulky je tl. pro nového uživatele… Tl. pro nového uživatele a tl. pro editaci otevírají stejný modal jehož content se načte podle stisknutého tl.(vždy je to formulář, jen jednou prázdný a jednou předvyplněný správnými daty). Ve FF vše funguje jak má, ale v Google Chrome začne po náhodném počtu otevření a zavření modal blbnout. Resp. většinou se jen objeví a hned zmizí(všiml jsem si, že po tom co začne blbnout je jedno jaké tl. zmáčknu a form v modalu se vždy načte podle posledního správně fungujícího). Občas se stane, že zešedne okno, ale modal se neobjeví.

default.latte

<div id="content">
    <div id="container">
        <div class="row">
            <div class="col-md-2 text-center">
                <a class="btn btn-primary" n:href="User:create" data-target="#userModal" data-toggle="modal">Nový uživatel</a>

                <div class="modal fade" id="userModal">
                    <div class="modal-dialog">

                        <div class="modal-content">

                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-8">
                <table class="table table-striped" style="width:100%">
                    <tr>
                        <th>Jméno</th>
                        <th>Příjmení</th>
                        <th>Datum narození</th>
                        <th>Upravit</th>
                        <th>Smazat</th>
                    </tr>
                {foreach $users as $user}
                    <div class="user">
                        <tr>
                            <td>{$user->jmeno}</td>
                            <td>{$user->prijmeni}</td>
                            <td>{$user->datum_narozeni|date:'m.d.Y'}</td>
                            <td><a class="btn btn-warning" n:href="User:edit $user->id" data-target="#userModal" data-toggle="modal">...</a>
                            </td>
                            <td><a class="btn btn-danger" n:href="User:delete $user->id" onClick="return confirm('Opravdu chcete odstranit uživatele z databáze?')">X</a></td>
                        </tr>
                    </div>
                {/foreach}
                </table>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</div>

User/create.latte (edit.latte je v podstatě stejný)

{block content}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4>Nový uživatel</h4>
</div>
<div class="modal-body">
    {control userForm}
</div>
<div class="modal-footer">

</div>

Hodně lidí mělo podobný problém, ale většinou to bylo ve scriptech (načítali např. jak bootstrap.js tak i bootstrap-modal.js apod.)

Tuším, že bude problém ve dvojím volání toggle, kvůli načtení obsahu z jiné stránky. Jednou pomocí data-toggle volám část modalu v default.latte a podruhé n:href zavolá část v konkrétní latte šabloně. Zvláštní je, že to neblbne hned a jen ve Chromu.

Napadlo mě takové krkolomné řešení. Celý modal bych načítal v default.latte, ale nevím jestli se dá nějak zavolat {control userForm} mimo složku User. Zřejmě by to navíc bylo proti OOP.

Předem děkuji za pomoc.