Codeigniter Call Modal от контроллера

Question

У меня проблема с вызовом модального всплывающего окна с контроллера ... В этом случае я использую datatables, и я хочу сделать форму редактирования в виде модального всплывающего окна ... Кто-то может мне помочь. .. ??

my datatables screenshot

вот мой контроллер:

function datatables(){ 
    $this->load->library('Datatables'); 
    $this->datatables->from('tb_rekap_wo_tj'); 
    $this->datatables->select('tj_id, tj_tanggal, tj_waktu_mulai, tj_waktu_selesai, tj_halte, tj_koridor, tj_teknisi1, tj_teknisi2, tj_petugas_halte, tj_permasalahan, tj_penanganan, tj_status, tj_keterangan'); 
    $this->datatables->add_column('edit', '<a href="wo_gt/edit/$1" title="Edit" onclick="wo_gt/edit/$1"><button class="btn btn-warning btn-sm"><i class="fa fa-pencil"></i></button></a> <a href="wo_gt/delete/$1"><button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></button></a>', 'tj_id'); 
    echo $this->datatables->generate(); 
} 
public function edit($id) { 
    $this->load->model('wo_model'); 
    $data = $this->wo_model->get_by_id($id); 
    echo json_encode($data); 
} 

вот результат:

view result

поэтому мой вопрос ... как показать результат в виде модального всплывающего окна. .. ?? Благодаря ...

Answer 1

Вы можете начать с HTML-формой

<div id="overlay" class="modal_overlay"></div> 
<div id="dialog" class="modal_window"> 
"here comes the table or whatever you wish to input and alter data you get from your tables." 
</div> 

Вы также, вероятно, нужна кнопка "Редактировать", как этот:

<input type="button" id="btnShowModal" value="Modal Dialog" /> 

затем добавить некоторые CSS для его:

<style type="text/css"> 


.modal_overlay 
{ 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background: #000000; 
    opacity: .15; 
    filter: alpha(opacity=15); 
    -moz-opacity: .15; 
    z-index: 101; 
    display: none; 
} 
.modal_window 
{ 
    display: none; 
    position: fixed; 
    width: 380px; 
    height: 200px; 
    top: 50%; 
    left: 50%; 
    margin-left: -190px; 
    margin-top: -100px; 
    background-color: #ffffff; 
    border: 2px solid #336699; 
    padding: 0px; 
    z-index: 102; 
    font-family: Verdana; 
    font-size: 10pt; 
} 

и JS для возбуждения события.

<script type="text/javascript"> 

    $(document).ready(function() 
    { 

     $("#btnShowModal").click(function (e) 
     { 
     ShowDialog(); 
     e.preventDefault(); 
     }); 

     $("#btnClose").click(function (e) 
     { 
     HideDialog(); 
     e.preventDefault(); 
     }); 

     $("#btnSubmit").click(function (e) 
     { 
     //submit logic 
     HideDialog(); 
     e.preventDefault(); 
     }); 

    }); 

    function ShowDialog() 
    { 
     $("#overlay").show(); 
     $("#dialog").fadeIn(300); 
     $("#overlay").unbind("click");   
    } 

    function HideDialog() 
    { 
     $("#overlay").hide(); 
     $("#dialog").fadeOut(300); 
    } 

</script> 

В основном у вас есть накладка, которые делают вещи появляются модальный после того, как вы отвязать «щелчок» также чувствует себя таким образом. Я не пробовал этот конкретный код прямо сейчас, но я использовал эту технику пару раз, чтобы сделать модальное окно.