Question

我使用以下示例创建模式窗口：

在模式中，我从表发送数据。我的代码：

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
        <!--begin modal  -->
        <div id="my-modal" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Item Clicked!</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Text:{{text}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
  <!--end modal -->


    <table class="table table-condensed">
        <thead>
        <tr>
            <th>id</th>
            <th>task</th>
            <th>date</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in tasks">

            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.id}}</td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">
                {{row.text}}
                <a data-toggle="modal" :data-target="'#myModal' + row.id" @click="itemClicked(row)">Edit from git</a>
            </td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.date_current}}</td>

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

但是由于某些原因，模式窗口未激活： enter link description here

如何解决？由于某种原因，该窗口不处于活动状态。脚本文本她，只有一部分用于模式：

Script:
<script type="text/javascript">
    //send post and open menu
    new Vue({
        el: '#app6',
        data:{
            tasks:[],
            fields:[
                'id','text','date',
            ],
            text:'',
            id:'',
            active: true,              
        },
        methods: {

            itemClicked: function(item) {
                this.id = item.id;
                this.text = item.text;
              //  console.log(item.id);
                $("#my-modal").modal('show');
            }
               //open edit windows
        }
    })

文本雾得到的限制最小。

Answer 1

在示例中，他们结合使用了 Bootstrap / jQuery 。这就是你应该使用的您的代码正常运行，而不是布尔玛。同样，最简单的方法是仅使用CDN。因此，您需要将这些行添加到head或主#app div之前的某个位置。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

然后删除布尔玛样式表。它弄乱了Bootstrap的样式..

~~<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">~~

new Vue({
  el: '#app6',
  data: {
    tasks: [],
    fields: [
      'id', 'text', 'date',
    ],
    text: '',
    id: '',
    active: true,
  },
  methods: {

    itemClicked: function(item) {
      this.id = item.id;
      this.text = item.text;
      //  console.log(item.id);
      $("#my-modal").modal('show');
    }
    //open edit windows
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app6">
  <div id="my-modal" class="modal fade">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Item Clicked!</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
        </div>
        <div class="modal-body">
          Text:{{text}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!--end modal -->


  <table class="table table-condensed">
    <thead>
      <tr>
        <th>id</th>
        <th>task</th>
        <th>date</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in tasks">

        <td span @mouseover="showButtonFunction" @mouseleave="hideButtonFunction"> {{row.id}}</td>
        <td span @mouseover="showButtonFunction" @mouseleave="hideButtonFunction">
          {{row.text}}
          <a data-toggle="modal" :data-target="'#myModal' + row.id" @click="itemClicked(row)">Edit from git</a>
        </td>
        <td span @mouseover="showButtonFunction" @mouseleave="hideButtonFunction"> {{row.date_current}}</td>

      </tr>
    </tbody>
  </table>
</div>

See this JSFiddle

模态窗口无效

1 个答案: