码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap无法弹出模态框的解决办法

时间:2018-06-11 11:01:43      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:ddb   解决办法   OLE   body   remove   ade   rem   plugins   type   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css">
</head>
<body>

<div class="container">
    <div style="padding: 20px 0">
        <a href="" class="btn btn-primary"  data-toggle=‘modal‘ id="addBtn" >添加</a>  //a标签需要设置弹出对话框时,需要提前添加 data-toggle=‘modal‘  
        <a href="" class="btn btn-danger">删除</a>
    </div>

    <div >
        <table class="table table-bordered">
            <thead >
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="table table-striped">
                <tr >
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td class="text-center">
                        <a href="" class="glyphicon glyphicon-remove"  ></a>
                        <a href="" class="fa fa-eraser"></a>
                    </td>
                </tr>
                <tr>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td>aaa</td>
                    <td class="text-center">
                        <a href="" class="glyphicon glyphicon-remove"></a>
                        <a href="" class="fa fa-eraser"></a>
                    </td>
                </tr>

                {% for row in stu_list %}
                    <tr >
                    <td>{{ row.id }}</td>
                    <td>{{ row.username }}</td>
                    <td>{{ row.age }}</td>
                    <td>
{#                        {{ row.gender }}#}
                        {% if row.gender == 1 %}
                            <div></div>
                        {% elif row.gender == 0 %}
                            <div></div>
                        {% endif %}
                    </td>
                    <td>
                        {{ row.cs.titile }}
                    </td>
                    <td class="text-center" >
                        <a href="" class="glyphicon glyphicon-remove"  ></a>
                        <a href="" class="glyphicon glyphicon-pencil"></a>
                    </td>
                    </tr>
                {% endfor %}


            </tbody>
        </table>
    </div>

</div>



<!-- Modal -->
<div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>
</div>


<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>


        $(#addBtn).click(function () {
            $(#addModal).modal(show)
        })



</script>

</body>
</html>

 

用a标签弹出对话框时,需要在a标签内添加 data-toggle = ‘modal‘,,否则,点击a标签是,模态对话框会瞬间消失

Bootstrap无法弹出模态框的解决办法

标签:ddb   解决办法   OLE   body   remove   ade   rem   plugins   type   

原文地址:https://www.cnblogs.com/lhqlhq/p/9165398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!