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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>IDth>
                    <th>姓名th>
                    <th>年龄th>
                    <th>性别th>
                    <th>班级th>
                    <th>操作th>
                tr>
            thead>
            <tbody class="table table-striped">
                <tr >
                    <td>aaatd>
                    <td>aaatd>
                    <td>aaatd>
                    <td>aaatd>
                    <td>aaatd>
                    <td class="text-center">
                        <a href="" class="glyphicon glyphicon-remove"  >a>
                        <a href="" class="fa fa-eraser">a>
                    td>
                tr>
                <tr>
                    <td>aaatd>
                    <td>aaatd>
                    <td>aaatd>
                    <td>aaatd>
                    <td>aaatd>
                    <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>




<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">×span>button>
        <h4 class="modal-title" id="myModalLabel">Modal titleh4>
      div>
      <div class="modal-body">
        ...
      div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
        <button type="button" class="btn btn-primary">Save changesbutton>
      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标签是,模态对话框会瞬间消失

转载于:https://www.cnblogs.com/lhqlhq/p/9165398.html

你可能感兴趣的:(Bootstrap无法弹出模态框的解决办法)