如何使用锚标记使用Bootstrap模式

时间:2016-06-17 11:22:22

标签: php html twitter-bootstrap-3 bootstrap-modal

我已经包含以下脚本

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/jquery-2.0.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>

HTML code:

<!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
        </div>
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <!--<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>-->
        </div>
    </div>

我的ajax调用PHP页面代码是:

while($row = mysql_fetch_array($run_query)){
    $name = $row['first_name'];
    $name_string = "<a edit_id='name_".trim($name)."' href='#' data-target='#myModal' data-toggle='modal'>{$name}</a>";
    //onClick=\"click_today('{$name}');\"
    $result_array[] = array($row['id'], $name_string, $row['last_name'], $row['job_title'], $row['salary']);
}

在我上面的php文件中我已将表数据传递到被调用的页面,这里我用于点击名称并显示模态这实际上是我的需要但模态没有显示而不是它将显示以下输出 enter image description here

我不知道我包含bootstrap 3.3.6 js和css文件的问题是什么

请告诉我我的错误

2 个答案:

答案 0 :(得分:0)

在代码中指定数据目标

$name_string = "<a edit_id='name_".trim($name)."' href='#'  data-toggle='modal' data-target='#myModal'>{$name}</a>";

如果你使用hide,那么使用jquery使用

$('#MymModal').modal('show');

答案 1 :(得分:0)

如果您使用锚标记来使用href =&#34; #your modal id&#34;

更改您的代码,如

$name_string = "<a edit_id='name_".trim($name)."' href='#myModal'  data-toggle='modal'>{$name}</a>";