Open a modal (in Codeigniter) that loads (in a ifr

Question

I'm opening this modal:

<div id="myModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1" role="dialog">
    <div class="modal-body" id="myModalBody">
            <script type="text/javascript">
                $(document).ready(function(){
                $("#contentHistorial").attr("src","<?php echo base_url('panel/usuarios_datos/historial/' . $item->usuId ) ?>");
            })
            </script>
            <iframe id="contentHistorial" src="<?php echo base_url('panel/usuarios_datos/historial/' . $item->usuId ) ?>"></iframe>
    </div>
</div>

I'm calling it with:

<a href="#" title="Historial del Usuario" data-toggle="modal" data-html="true" data-target="#myModal" data-content="">
<?php echo $item->usuRut;?>
</a>

I have to pass the $usuRut in order to get that the modal load the content of an URL (a view) like:

panel/usuarios_datos/historial/13

where "13" has to be the usuId that comes from a link that I clic.

I can load the modal, and the content of a static page (always the content of panel/usuarios_datos/historial/1) but I can't manage to load the usuId of a link... any help?

Answer 1

You can load modal from remote url. I assume you use bootstrap. Modal:

<!-- 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">Modal title</h4>

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

Run by:

<a data-toggle="modal" href="[link]" data-target="#myModal">Click me !</a>

Where link is your link to .modal-content

Example fiddle: http://jsfiddle.net/koala_dev/NUCgp/918/