The pop-up window is currently inactive

Question

The pop-up window is currently inactive

Utilizing the following example, I successfully created a modal window:

The modal window allows me to display data from a table. Here is a snippet of my code:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
        <!--begin modal  -->
       <!-- Modal code here -->
  <!--end modal -->

    <table class="table table-condensed">
       <!-- Table content here -->
    </table>
</div>

However, I am facing an issue where the modal window is not active. See the problem in action here: enter link description here

If you can assist with resolving this issue, it would be greatly appreciated. Below is a section of the script that pertains to the modal functionality:

Script:
<!-- Vue.js script here -->

Text fog get minimal limit.

javascript vue.js modal-dialog vue-component

Answer 1

Answer №1

For this particular example, the use of Bootstrap/jQuery is recommended over Bulma. To ensure your code functions correctly, include the following lines in the head section or before the main #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>

Remember to remove the Bulma stylesheet as it may interfere with the Bootstrap styles:

<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>

Check out this JSFiddle for reference

Answer 2

For this particular example, the use of Bootstrap/jQuery is recommended over Bulma. To ensure your code functions correctly, include the following lines in the head section or before the main #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>

Remember to remove the Bulma stylesheet as it may interfere with the Bootstrap styles:

<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>

Check out this JSFiddle for reference

The pop-up window is currently inactive

Answer №1

Similar questions

Having trouble with JavaScript not functioning correctly within the Update Panel?

Dynamic JavaScript button control based on time

Choose a procedure to reset to the original setting

Incorporating Axios data into a React component

Show the user's chosen name in place of their actual identity during a chat

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

barchart rendered in SVG without the use of any external libraries

The Vue.js application is experiencing issues with the v-for functionality

Passing data between child components in Vue.js

Leverage Jasmine for testing a jQuery plugin

Learn the process of sending both Header and Body data in a POST request using Axios with Vue.js

Navigate to a specific element using Selenium WebDriver in Java

What methods can I utilize to transmit Global variable data from a view to a controller?

Controlling the Vuetify Navigation drawer from a separate component

How can a Chrome extension transfer an ArrayBuffer or Blob from a content script to the background script without compromising its data type?

The functionality of Selection.modify is unfortunately limited when it comes to input and textarea elements in Firefox

How can I use jQuery to create a new div element if it is not already present

What is the best way to determine the normals of a closed shape in three.js?

Angular and Node integration with Firestore authentication

design facebook type box scroll bar