modal-dialog 相关问题

我打开模态时出错。这是我的代码：添加新数据我打开模态时出错。这是我的代码： <div> <x-button onclick="viewFormAdd()" data-bs-toggle="modal" type="button">Add New Data</x-button> </div> <script> function viewFormAdd() { $.get("{{ route('kategori.create') }}", {}, function(data, status) { $('.viewmodal').html(data).show(); $('#modalCreateKategori').modal('show'); } ); } </script> 创建Kategori.blade.php <x-modal modalId="modalCreateKategori" modalTitle="Tambah Kategori"> <form method="post" action="{{ route('kategori.store') }}" class="formtambah"> @csrf <div class="grid grid-rows-2"> <div> <x-label>Nama Kategori</x-label> <x-input type="text" name="nama_kategori" id="nama_kategori" /> @error('nama_kategori') <small>{{ $message }}</small> @enderror </div> <div class="justify-end items-center"> <x-button type="submit">Simpan</x-button> </div> </div> </form></x-modal> 阿贾克斯： <script> $(document).ready(function() { $('.formtambah').submit(function(e) { e.preventDefault(); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ type: "post", url: $(this).attr('action'), data: $(this).serialize(), dataType: "json", success: function(response) { if (response.tersimpan) { Swal.fire({ position: 'center', icon: 'success', title: 'Tersimpan!', text: response.tersimpan, showConfirmButton: false, timer: 1500 }) $('.btn-close').click(); dataKategori(); } }, error: function(xhr, thrownError) { alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError); } }); return false; }); });</script> 我的控制器： public function create() { return view('kategori.createKategori'); } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(KategoriRequest $request) { $kategori = new Kategoris; $kategori->namakat = $request->nama_kategori; $kategori->save(); $msg = [ 'tersimpan'=> 'Produk baru berhasil tersimpan!' ]; return response()->json($msg); } 我的类别请求： class KategoriRequest extends FormRequest{ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array<string, mixed> */ public function rules() { return [ 'nama_kategori' => 'required' ]; } public function messages() { return[ 'nama_kategori.required' => 'Maaf, nama kategori harus diisi' ]; } } 当我打开模态时，模态不起作用并出现错误“未定义变量 $errors（查看：C:\xampp\htdocs ewsinartimur_laravel_9 资源视图\类别

php laravel validation modal-dialog

回答 0 投票 0

C# OpenFileDialog 非模态可能

是否可以创建/拥有非模态 .net OpenFileDialog 我在主对话框中有一个 UI 元素，始终需要可供用户按下。

c# modal-dialog openfiledialog

回答 5 投票 0

模式内的antd表单未在reactjs中提交

我正在尝试在模式表单内提交表单，但该表单未提交且未显示任何错误。我的组件有两种形式。当用户单击按钮时，它会打开模式...

reactjs modal-dialog antd

回答 1 投票 0

如何处理对话框（模态）上的“外部”点击？

单击框外时，我的框会关闭，使我丢失所有输入。我希望仅在单击取消按钮时关闭我的框。我不确定是什么让它在点击退出时关闭......

javascript reactjs dialog modal-dialog material-ui

回答 11 投票 0

React-leaflet 在 Modal 中无法正确显示

大家！我尝试在我的 React 项目中使用 Materialise 风格的 React-leaflet。当我打开模态组件时，我看不到地图。我安装了npm install react-leaflet，也在index.html中添加了大家！我尝试在我的 React 项目中使用 Materialise 风格的 React-leaflet。当我打开模态组件时，我看不到地图。我安装了 npm install react-leaflet，还在index.html [email protected]/dist/leaflet.css 中添加了“ 完整性=“sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=” 跨域=“”/> import React, { useEffect, useRef } from "react"; import PropTypes from "prop-types"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; export const MapModal = ({ lnglat }) => { const mapRef = useRef(null); useEffect(() => { // Clean up the map instance when the modal is closed return () => { if (mapRef.current) { mapRef.current.remove(); } }; }, []); return ( <div id='MapModal' className='modal'> <div className='modal-content'> <MapContainer center={[48.0196, 66.9237]} zoom={5} style={{ height: "50vh", width: "100%" }} ref={mapRef} > <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' /> <Marker position={lnglat}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> </div> </div> ); }; MapModal.propTypes = { lnglat: PropTypes.array, }; 请帮我解决这个问题吗？将此添加到导入中import 'leaflet/dist/leaflet.css';我遇到了同样的问题，这解决了它。你需要添加一个中间组件来等待引导模态完成初始化，即从你的主组件中添加一个中间组件，在中间组件中你必须设置一个设置的超时时间，例如： useEffect(() => { setTimeout(function() { setShowMap(true); }, 2000); }, [isShowMap]); //In the return: { showMap ? < CustomMap lat = { lat } lng = { lng } setlat = { setlat } setlng = { setlng } />: < div > < /div> }

reactjs modal-dialog materialize react-leaflet

回答 2 投票 0

Angular 6 - 将组件显示为来自组件的模式对话框。ts

在从组件执行提交操作后，我尝试显示模式确认弹出窗口。我的 home.component.ts 中的 onSubmit() 方法： onSubmit() { var 响应 = 新响应...

angular modal-dialog bootstrap-modal

回答 1 投票 0

脚本中使用的html对话框的返回值

我在 HTML 对话框中有一个填充了工作表名称的下拉列表。我需要返回在下拉列表中选择的值并在后面的脚本中使用它。如何返回从 HTML 数据中选择的值...

google-apps-script modal-dialog

回答 1 投票 0

在 HTMLDialogElement.showModal() 上添加 jquery-ui 日期选择器（绕过伪背景）

问题输入元素位于 HTML 的标签中，showModal 用于以模式方式打开对话框。有没有办法在对话框顶部打开 jquery-ui-datepicker。现在，它隐藏着......

javascript jquery html modal-dialog jquery-ui-datepicker

回答 1 投票 0

对模态元素进行动画处理<dialog>：整个身体会移动

的想法是让一个元素作为模式对话框打开，并在打开时从右侧滑入。以下是我想出的最小示例：这个想法是让一个 <dialog> 元素作为模式对话框打开，并在打开时从右侧滑入。以下是我想出的最小示例： <button type="button" onclick="document.querySelector('.slide-in').show()">open</button> <dialog class="slide-in"> <form method="dialog"><button>close</button></form> </dialog> <style> .slide-in { left: auto; right: -200px; } .slide-in[open] { animation-name: slide-in; animation-duration: .5s; animation-iteration-count: 1; right: 0; } @keyframes slide-in { from { right: -200px; } to { right: 0; } } </style> 但是由于某种原因，当对话框打开时，它保持在屏幕的右侧，而整个主体从左侧移入。演示：https://jsbin.com/sominizona/edit?html,css,output 我认为这与顶层概念有关，但我对如何更改以使对话框移动而不是文档的整个其余部分有点不知所措。您不需要任何初始定位样式，只需使用 translateX @keyframes slide-in { 0%{ transform: translateX(100%) } } .slide-in { margin-right: 0; position: fixed; inset: 0; } .slide-in[open] { animation-name: slide-in; animation-duration: .5s; animation-iteration-count: 1; } @keyframes slide-in { 0%{ transform: translateX(100%) } } /*@keyframes slide-in { from { right: -200px; } to { right: 0; } }*/ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor, erat vel pharetra vulputate, neque justo euismod justo, vel tristique nibh sapien a felis. Sed laoreet, lorem quis gravida sollicitudin, enim est pharetra enim, ut accumsan metus lacus a quam. Morbi faucibus quam et metus sagittis malesuada. Vivamus consectetur odio sed suscipit malesuada. Duis urna quam, pharetra id eleifend in, rhoncus id nisi. Donec sit amet porta velit. Donec pellentesque purus eget libero tincidunt, sit amet aliquet purus sagittis. Quisque in leo at leo lacinia bibendum a semper ligula.</p> <p>Click the button below. A modal dialog opens. It should slide in from the right. Instead the body slides in from the left, while the dialog stays put.</p> <div class="container"> <button type="button" onclick="document.querySelector('.slide-in').show()">open</button> <dialog class="slide-in"> <form class="inner" method="dialog"><button>close</button></form> </dialog> </div> </body> </html>

html css modal-dialog css-animations css-position

回答 1 投票 0

第二个模态关闭时第一个模态滚动隐藏

使用两个模态时，在第二个模态关闭时，第一个模态的滚动将隐藏。可以在这里看到一个示例（这不是我的代码，我只是用它来展示我的问题是什么）。我的第一个模组...

javascript angularjs modal-dialog bootstrap-modal

回答 3 投票 0

将数据插入数据库后如何加载模态作为警报？

将数据插入数据库后弹出模式时遇到问题。因此，在 tambahnotis.php 中，我有一个表单供用户输入要插入数据库的数据。在 tambahnotis.php 的头部，我有...

php html modal-dialog bootstrap-modal simplemodal

回答 1 投票 0

(Vue.js) 模态关闭事件

当我点击模态框的外部区域时，我想要与模态框的关闭按钮相同的事件。（点击模态外部区域时关闭模态的事件）目前的进展是