Modal doesn’t close on the Electron, how to fix it?

Question

Modal doesn’t close on the Electron, how to fix it?

Asked 5 years, 10 months ago

Viewed 169 times

0

I have a modal problem. My problem is that the modal, does not close when clicking the button, I tried several ways, but none worked. How can I fix this?

    <script>
      var read = require('read-file-utf8')
      var loki = require('lokijs');
      var db = new loki('loki.json')
      var data = read(__dirname+'/loki.json')
      db.loadJSON(data);
      const Vue = require('vue');


      var clientes = db.getCollection('clientes');
      Vue.config.productionTip = false;

      new Vue({
        el:'#app',
        data:{
          clientes: [],
          client:{
            nome:'',
            cpf: '',
            endereco:'',
            telefone:'',
            placa:'',
            compania:''
          },
          $('#showModal').modal({
          showModal: false();
          }),
        },
        mounted: function(){
        this.clientes = clientes.data;
        console.log(this.clientes);
       },
       methods:{
        editClient:function(client){
        this.mode='edicao';
        this.showModal = true;
        this.client=client;
        }
        createClient:function{
          this.mode='edicao';
          this.showModal = true;
          this.client=client;
          this.client:{
            nome:'',
            cpf: '',
            endereco:'',
            telefone:'',
            placa:'',
            compania:''
          };
        }
       }
      });
    </script>

html, body, #home{
	height: 100%;
}

#home2{
	margin-top: 20px;
	margin-bottom: 222px;
	padding-bottom: 200px;
	padding-top: 200px;
}
body{
	background: linear-gradient(to bottom, #5CB4D4,#ffffff);
				background-attachment: fixed;

}

/***********BARRA DE NAVEGAÇÃO************/

nav.navbar-transparente{
	background: white;
	padding: 5px 0px;

}

.navbar-light .navbar-nav .nav-link{
	font-weight: 900;
}

.capa{
	text-align: center;
}

.fundo{
	background-color:  rgb(0,0,0,0.6);
}

footer{
	background-color: #2b82a1;
	padding-top: 2px;
}

footer .navbar-nav a{
	color: white;
	font-size: 0.8em;
}

footer .navbar-nav a:hover{
	color: #5CB4D4;
	font-size: 0.8em;
}


#modal{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: rgba(0,0,0,0.7);
}

#modal .wrap{
	position: center;
	padding: 20px;
	width: 60%;
	height: 60%;
	margin-left: 20%;
	margin-top: 10%;
	background:#fff;
}

  <body>
    <section id="home2" class="d-flex"><!-- Início seção home -->
      <h2 class="col-md-12 text-center">Dados dos Clientes</h2> 
        <table class="table table-striped">
      <thead>
        <tr>
          <th>nome</th>
          <th>cpf</th>
          <th>endereco</th>
          <th>telefone</th>
          <th>placa do carro</th>
          <th>compania</th>
        </tr>
      </thead>

      <tbody>
        <tr id="app">
          <td>
            {{cliente.nome}}
          </td>
          <td v-for = "cliente in clientes">
          {{cliente.cpf}}
          </td>
          <td v-for = "cliente in clientes">
          {{cliente.endereco}}
          </td>
          <td v-for = "cliente in clientes">
          {{cliente.telefone}}
          </td>
          <td v-for = "cliente in clientes">
          {{cliente.placa}}
          </td>
          <td v-for = "cliente in clientes">
          {{cliente.compania}}
          </td>   
          <td>
            <button type="submit" id="editar" class="btn btn-negative" @click="editClient(cliente)" >Editar</button>
          </td>
        </tr>
      </tbody>
    </table>
</section>

  <div id="modal" v-if="showModal">
    <div class="wrap">
        <form action="" class="col-md-12 pane-body" id="cadastro-cliente">
        <div class="container row  justify-content-center">
          <div class="row justify-content-center">
            <h2 class="col-md-12 text-center">Cadastro do cliente</h2> 
          <div class="form-group col-md-12 justify-content-center">
            <label for="nome">Nome Completo</label>
            <input type="text" class="form-control" name="name" id="nome" v-model="client nome" placeholder="Nome Completo">
              </div>
        <div class="form-group col-md-6">
          <label for="cpf">CPF</label>
          <input type="text" class="form-control" name="cpf" id="cpf" v-model="client cpf" placeholder="CPF com 9 digitos">
        </div>
        <div class="form-group col-md-6">
         <label for="endereco">Endereço</label>
         <input type="text" class="form-control" name="endereco" v-model="client endereco" id="endereco" placeholder="ex: Rua Professor araujo, 12345">
        </div>
        <div class="form-group col-md-6">
          <label for="telefone">Telefone</label>
          <input type="text" class="form-control" name="telefone" id="telefone" v-model="client telefone" placeholder="ex: 539822232512">
        </div>
        <div class="form-group col-md-6">
          <label for="placa">Placa do carro</label>
          <input type="placa" class="form-control" name="placa" id="placa" v-model="client placa" placeholder="ex: asd-1234">
        </div>
        <div class="form-group col-md-6">
          <label for="compania">Compania</label>
          <input type="text" class="form-control" name="compania" id="compania" v-model="client compania" placeholder="ex: asd-1234">
        </div>
        </div>
        <div class="justify-content-center pb-5">
          <button type="button" id="salvar" class="btn btn-primary">Cadastrar</button>
          <button type="button" class="btn btn-negative" @click="showModal=false">Fechar</button>
        </div> 
        </div>
      </form>
    </div>
  </div>
</body>


      <footer><!--INICIO RODAPE-->     
       <footer class="mt-4">
        <div class="container">
          <div class="row d-flex">
            <ul class="navbar-nav ml-auto col-md-1">
                <li class="nav-item">
                  <a href="" class="nav-link">Home</a>
                </li>
              </ul>
               <ul class="navbar-nav ml-auto col-md-1">     
                <li class="nav-item">
                  <a href="" class="nav-link">Empresa</a>    
              </ul>
               <ul class="navbar-nav ml-auto col-md-1">             
                <li class="nav-item">
                  <a href="" class="nav-link">Planos</a>
                </li>
              </ul>
            <div class="col-md-4 col text-light">
              <p class="text-center">
              Copyright&copy; All rights reserve Outline Corretora.
              </p>
              <p class="text-center">
                made by Alisson. 
              </p>

            </div>
            <div class="col-md-4 d-flex justify-content-end">
              <a href="" class="btn align-self-center btn-outline-light">
                <i class="fab fa-facebook"></i>
              </a>
              <a href="" class="btn align-self-center btn-outline-light ml-2">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="" class="btn align-self-center btn-outline-light ml-2">
                <i class="fab fa-instagram"></i>
              </a>
              <a href="" class="btn align-self-center btn-outline-light ml-2">
                <i class="fab fa-youtube"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      </footer><!--FIM RODAPE-->


    <!-- JavaScript (Opcional) -->
    <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</html>

Young here is the PT.Stackoverflow, please edit your question by writing in Portuguese.

– hugocsl

2018/12/29 at 22:44
edited, I’m sorry!

– Alisson Blaas

2018/12/29 at 23:04

3 answers

Browser other questions tagged javascript html node.js vue.js electron

You are not signed in. Login or sign up in order to post.

by Matheus Cristian • **1,045** points · Answer 1 · 2019-01-01T05:01:20+00:00

Good night, Alisson!

In your code, there is a control word treatment false as if it were a function false();. What could show a mistake like:

VM6118:1 Uncaught TypeError: false is not a function

Try removing these parentheses and see if it works. But anyway, I don’t know if this code is actually accepted to close a modal.

Bootstrap offers a way for modal closure through Javascript.

Try to replace this part of the code:

$('#showModal').modal({
  showModal: false();
}),

For:

$('#showModal').modal('hide');

Learn more in: https://getbootstrap.com.br/docs/4.1/components/modal/

Happy New Year to all!

by Alisson Blaas • 1 point · Answer 2 · 2019-01-09T19:01:03+00:00

SOLVED PERSONAL! I created a modal with bootstrap, but I was missing the jquery I then used the command: npm install jquery --save , to download jquery and insert a call script into Electron.

<script>window.$ = window.jQuery = require('jquery');</script>

Soon after I used the:

 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

to call the bootstrap library and it worked!

by Rafael • **496** points · Answer 3 · 2018-12-31T14:07:59+00:00

I don’t work with Vue, but I found a code working, very simple:

Jsfiddle

In any case, there is already a bootstrap library for Vue:

Bootstrap 4 Vue

I hope I’ve helped!