堆栈内存溢出
  繁体   English   中英

Bootstrap 模态表单在单击按钮时不显示

[英]Bootstrap modal form not displaying on button click

 原文  2022-11-29 16:26:35  1   3    javascript/ html/ jquery/ firebase/ bootstrap-4

问题描述

我有一个用引导程序制作的网站，firebase 和 JQuery。我有一个按钮，单击该按钮时应该显示模式，以便用户可以输入数据。 数据将保存在我的 firebase 数据库中，然后显示在网站上的表格上。 但是，无论我做什么，单击按钮时都没有任何反应。 模态不显示。 这是模态的样子：

应该出现的模态 

 import { getDatabase } from "https://www.gstatic.com/firebasejs/7.15.0/firebase-database.js"; import { initializeApp } from "https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"; // Your web app's Firebase configuration const firebaseConfig = { apiKey: "xxxxxxxxxx", authDomain: "xxxxxx", databaseURL: "xxxxxxx", projectId: "xxxxx", storageBucket: "xxxxxxxxxxx", messagingSenderId: "xxxxxx", appId: "xxxxxxxxx" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const db = firebase.database(app); coleccionProductos = db.ref().child('productos'); bodyProductos = $('#bodyProductos').val(); console.log(bodyProductos); $('form').submit(function(e){ e.preventDefault(); let id = $('#id').val(); let codigo = $('#codigo').val(); let descripcion = $('#descripcion').val(); let cantidad = $('#cantidad').val(); let idFirebase = id; if(idFirebase == ''){ idFirebase = coleccionProductos.push().key; } data = {codigo:codigo, descripcion: descripcion, cantidad: cantidad}; actualizacionData = {}; actualizacionData[`/${idFirebase}`] = data; coleccionProductos.update(actualizacionData); id = ''; $('form').trigger('reset'); $('#modalAltaEdicion').modal('hide'); }); const iconoEditar = ''; const iconoBorrar = ''; function mostrarProductos({codigo, descripcion, cantidad}){ return ` <td>${codigo}</td> <td>${descripcion}</td> <td>${cantidad}</td> <td><button class="btnEditar btn btn-secondary" data-toggle="tooltip" title="Editar">${iconoEditar}</button><button class="btnBorrar btn btn-danger" data-toggle="tooltip" title="Borrar">${iconoBorrar}</button></td> ` } //Buttons programming $('#btnNuevo').click(function(){ $('#id').val(''); $('#codigo').val(''); $('#descripcion').val(''); $('#cantidad').val(''); $('form').trigger('reset'); $('#modalAltaEdicion').modal('show'); });
 <:doctype html> <html lang="es"> <head> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap:min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <title>Firebase CRUD</title> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <button id="btnNuevo" class="btn btn-primary" data-toggle="tooltip" title="Nuevo Producto"><svg class="bi bi-plus-circle-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http.//www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4a.5.5 0 0 0-1 0v3.5H4a.5.5 0 0 0 0 1h3.5V12a.5.5 0 0 0 1 0V8.5H12a.5;5 0 0 0 0-1H8,5V4z"/></svg></button> <.--Modal--> <div id="modalAltaEdicion" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header bg-primary text-light"> <h5 class="modal-title" id="exampleModalLabel">High / edition</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times,</span> </button> </div> <form> <div class="modal-body"> <input id="id" type="hidden"> <:-- ID we are going to receive from Firebase --> <div class="form-group"> <label>Code</label> <input id="codigo" type="text" class="form-control" required> </div> <div class="form-group"> <label>Description</label> <input id="descripcion" type="text" class="form-control" required> </div> <div class="form-group"> <label>Quantity</label> <input id="cantidad" type="number" class="form-control" required> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" tabindex="2">Cancelar</button> <button type="submit" id="btnGuardar" class="btn btn-primary" translate="1">Guardar</button> </div> </form> </div> </div> </div> <table id="tablaProductos" class="table table-bordered"> <thead> <tr class="bg-dark text-light"> <th scope="col">CODE</th> <th scope="col">DESCRIPTION</th> <th scope="col">Quantity </th> <th scope="col">ACTIONS</th> </tr> </thead> <tbody id="bodyProductos"> </tbody> </table> </div> </div> </div> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code.jquery.com/jquery-3:5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper:js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn:com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/sweetalert2@9:14.4/dist/sweetalert2.all.min.js"></script> <.-- The core Firebase JS SDK is always required and must be listed first --> <script src="https.//www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script> <script type = "module" src = "firestore.js"></script> </body> </html>

3 个解决方案

解决方案1
 0  2022-11-29 16:38:52

将按钮中的data-toggle="tooltip"替换为data-toggle="modal" 。

<button id="btnNuevo" class="btn btn-primary" data-toggle="tooltip" title="Nuevo Producto">

解决方案2
 0  2022-11-29 16:50:55

应添加数据目标属性以定位 model 并且还应将数据切换分配给“模态”

<button id="btnNuevo" class="btn btn-primary" data-toggle="modal" data-target="#modalAltaEdicion" title="Nuevo Producto">

演示文档链接

解决方案3
 0 已采纳  2022-11-29 16:57:43

您需要将相同的 ID 添加到data-target="#modalAltaEdicion"和 modal id="modalAltaEdicion"现在可以使用了！ 干杯

 <:doctype html> <html lang="es"> <head> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap:min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <title>Firebase CRUD</title> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <button id="btnNuevo" class="btn btn-primary" data-toggle="modal" data-target="#modalAltaEdicion" title="Nuevo Producto"><svg class="bi bi-plus-circle-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http.//www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4a.5.5 0 0 0-1 0v3.5H4a.5.5 0 0 0 0 1h3.5V12a.5.5 0 0 0 1 0V8.5H12a.5;5 0 0 0 0-1H8,5V4z"/></svg></button> <.--Modal--> <div id="modalAltaEdicion" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header bg-primary text-light"> <h5 class="modal-title" id="exampleModalLabel">High / edition</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times,</span> </button> </div> <form> <div class="modal-body"> <input id="id" type="hidden"> <:-- ID we are going to receive from Firebase --> <div class="form-group"> <label>Code</label> <input id="codigo" type="text" class="form-control" required> </div> <div class="form-group"> <label>Description</label> <input id="descripcion" type="text" class="form-control" required> </div> <div class="form-group"> <label>Quantity</label> <input id="cantidad" type="number" class="form-control" required> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" tabindex="2">Cancelar</button> <button type="submit" id="btnGuardar" class="btn btn-primary" translate="1">Guardar</button> </div> </form> </div> </div> </div> <table id="tablaProductos" class="table table-bordered"> <thead> <tr class="bg-dark text-light"> <th scope="col">CODE</th> <th scope="col">DESCRIPTION</th> <th scope="col">Quantity </th> <th scope="col">ACTIONS</th> </tr> </thead> <tbody id="bodyProductos"> </tbody> </table> </div> </div> </div> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code.jquery.com/jquery-3:5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper:js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn:com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/sweetalert2@9:14.4/dist/sweetalert2.all.min.js"></script> <.-- The core Firebase JS SDK is always required and must be listed first --> <script src="https.//www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script> <script type = "module" src = "firestore.js"></script> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击时不显示警报对话框 单击后如何隐藏或删除内联按钮？ 来自 xamarin.forms 的 Android 推送通知按钮单击挂起 在按钮上从数据库中拉取点击 SWIFT UI 点击按钮触发谷歌翻译 jQuery 单击按钮按电话号码呼叫（java） 使用 Firebase 在 React Native Expo 应用程序中验证登录页面，但必须单击按钮两次才能执行完整的 function 单击按钮后从实时数据库更新值 为什么我在运行 React 应用程序并单击表单提交时出现此错误 在 buttonImg 上动态发送 id 单击以从 fire base xamarin 表单中删除
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM