{literal}
<style>
    .notefly_tr_toggle{cursor: pointer;}
    .notefly_trhide{display: none;}
    .note_fly{
        display: none; position: absolute;
        left:10px;top:20px;
        width:80%;height:400px;
        background: #fff;
        z-index:9999;padding:10px;
        border:1px solid gray;
        color:black;
    }
    .note_fly_body_wrap{
        overflow: auto;overflow-x: hidden;
        height:350px;
    }
</style>
<script>$(document).ready(function(){
    $(document).on("click", ".notefly_tr_toggle", function () {
        let id = $(this).data("id");
        $("#notefly_tr_"+id).toggle();
    });
    $(".note_fly_show").click(function(){
        $.ajax({
            url: '/json_new.php',dataType:'json',type:'POST',async:false,data:'ajdes=notes_show',
            success: function(data){
                $('.note_fly_body').html(data.html);
            }
        });
        $(".note_fly").css({'position':'absolute'});
        $(".note_fly").show();
        return false;
    });
    $('.btn_fly_close').click(function(){
        $(".note_fly").hide();
        return false;
    })
});</script>
{/literal}
<a href="#" class="note_fly_show" style="font-size: 26px;"><i class="icon-book icon-white tooltips" data-trigger="hover" data-placement="bottom" data-original-title="Мои заметки"></i></a>
<div style="position: relative;width:500px;">
    <div class="note_fly">
        <div class="note_fly_head">
            <table class="table table-striped table-bordered table-advance table-hover"><tr>
                <td style="width:10%"><a href="#" class="btn btn-secondary btn_fly_close"><i class="icon-remove icon-white"></i></a></td>
                <td style="width:50%"><b style="font-size: 16px;">Мои заметки</b></td>
                <td style="width:40%;text-align:right;"><a href="/notes/add/" class="btn btn-warning"><i class="icon-plus icon-white"></i></a><a href="/notes/" class="btn btn-success"><i class="icon-list icon-white"></i></a></td>
            </tr></table>
        </div>
        <div class="note_fly_body_wrap">
            <table class="table table-striped table-bordered table-advance table-hover">
                <thead>
                <tr>
                    <th style="width:20%;">Время</th>
                    <th style="width:60%;">Заметка</th>
                    <th style="width:20%;"></th>
                </tr>
                </thead>
                <tbody class="note_fly_body"></tbody>
            </table>
        </div>
        <div class="note_fly_foot"></div>
    </div>
</div>