bootstrap-modal 相关问题

我希望按钮并排在右侧，但表单似乎占用了太多空间。红色框是表单容器我希望按钮并排在右侧，但表单似乎占用了太多空间。红框是表单容器 <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <form method="post" action="{{ route('company.destroy', ['company' => $company]) }}"> @csrf @method('delete') <input type="submit" value="Confirm Delete" class="btn btn-danger m-3" role="button" aria-pressed="true"> </form> </div> 我尝试使用 d-flex <div class="modal-footer"> <div class="d-flex justify-content-end"> <button type="button" class="btn btn-secondary me-2 h-10" data-bs dismiss="modal">Close</button> <form method="post" action="{{ route('company.destroy', ['company' => $company]) }}"> @csrf @method('delete') <input type="submit" value="Confirm Delete" class="btn btn-danger" role="button" aria-pressed="true"> </form> </div> </div> 结果就像这个我尝试控制表单大小 <form method="post" action="{{ route('company.destroy', ['company' => $company]) }}" class="w-25 h-10"> 但按钮位置保留在那里，在表单容器和模式之外。图片按钮会并排对齐，因为模态页脚已经是 Flexbox 容器，其内容指定为右对齐，因此您的 <div> 和 d-flex justify-content-end 是不必要的。我创建了一个示例 jsfiddle，其中我从 Bootstrap 5 文档中获取了演示模式，添加了一个内部带有危险按钮的表单，并且它按照您想要的方式呈现：https://jsfiddle.net/martinbean/ Lu15xmeq/2/

bootstrap-modal bootstrap-5

回答 1 投票 0

第一次打开模态时Select2显示两次

我有一个模态，该模态使用js动态显示内容。模态 html 是这样的：我有一个模态，该模态通过使用 js 动态显示内容。模态 html 是这样的： <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> 然后模态使用我提供的模板将内容附加到“modalBody”内。内容正文模板的一个示例是： <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name"> <option></option> <option value="0">Other</option> @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1"> <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;"> <i class="fas fa-save"></i> Update </button> </div> </div> 这是我的 JavaScript 代码，它动态更改模式的内容： <script> // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function () { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content TMCEWoFileUpl("250", ""); }); </script> 问题是，当我在页面加载后打开模式时，它会显示两个下拉菜单：一个功能正常，而另一个似乎是重复的并且不起作用。但是，当我第二次打开模式时，下拉列表会正确显示并且不会重复。有人可以帮我解决这个问题吗？我尝试过在模态之外初始化它，但仍然不起作用。这是现场演示： // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function() { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content //TMCEWoFileUpl("250", ""); }); <link href="~/lib/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" /> <script src="~/lib/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> <hr> <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option>  </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name" > <option></option> <option value="0">Other</option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option>  </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1" > <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;" > <i class="fas fa-save"></i> Update </button> </div> </div> 我根据 aurelian-scarlat 在此 GitHub 问题中的评论找到了解决方案如果你的盒子有一个名为 select2 的类，你会遇到麻烦，因为还有一些其他元素具有相同的类。所以这是错误的：$('.select2').select2('destroy'); 正确的做法是： $('select.select2').select2('destroy'); 或者更改盒子的类别：$('.select-select2').select2('destroy'); 或者更好的是，使用 id：$('#selectbox').select2('destroy'); 我花了一段时间才弄清楚这一点，我希望它对某人有帮助。我不能使用类名.select2normalWithouClear，因为还有一些其他元素具有相同的类。所以我所做的就是为我的所有选择赋予相同的新类名称，并像这样初始化它们： <select class="form-control select2normalWithouClear edu-level mySelectDropdown" data-placeholder="Select Education Level"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> <select class="form-control select2normalWithouClear edu-instituteName mySelectDropdown" data-placeholder="Select Institution Name"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> 初始化它： $('.mySelectDropdown').select2({ placeholder: $(this).data('placeholder') });

javascript html jquery bootstrap-modal jquery-select2

回答 1 投票 0

第一次打开时模态框显示两次

我有一个模态，该模态使用js动态显示内容。模态 html 是这样的：我有一个模态，该模态通过使用 js 动态显示内容。模态 html 是这样的： <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> 然后模态使用我提供的模板将内容附加到“modalBody”内。内容正文模板的一个示例是： <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name"> <option></option> <option value="0">Other</option> @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1"> <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;"> <i class="fas fa-save"></i> Update </button> </div> </div> 这是我的 JavaScript 代码，它动态更改模式的内容： <script> // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function () { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content TMCEWoFileUpl("250", ""); }); </script> 问题是，当我在页面加载后打开模式时，它会显示两个下拉菜单：一个功能正常，而另一个似乎是重复的并且不起作用。但是，当我第二次打开模式时，下拉列表会正确显示并且不会重复。有人可以帮我解决这个问题吗？我尝试过在模态之外初始化它，但仍然不起作用。这是现场演示： // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function() { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content //TMCEWoFileUpl("250", ""); }); <link href="~/lib/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" /> <script src="~/lib/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> <hr> <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option>  </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name" > <option></option> <option value="0">Other</option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option>  </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1" > <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;" > <i class="fas fa-save"></i> Update </button> </div> </div> 如果我的问题不清楚，我很抱歉，我对这个领域还是新手。不过，我根据 GitHub 问题中“aurelian-scarlat”的评论找到了一个解决方案： https://github.com/Meteor-Community-Packages/meteor-autoform-select2/issues/44 我无法使用类名“.select2normalWithouClear”，因为还有一些其他元素具有相同的类。所以我所做的就是为我的所有选择赋予相同的新类名称，并像这样初始化它们： <select class="form-control select2normalWithouClear edu-level mySelectDropdown" data-placeholder="Select Education Level"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> <select class="form-control select2normalWithouClear edu-instituteName mySelectDropdown" data-placeholder="Select Institution Name"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> 初始化它： $('.mySelectDropdown').select2({ placeholder: $(this).data('placeholder') });

javascript html jquery bootstrap-modal jquery-select2

回答 1 投票 0

Select2 第一次打开时在模态中显示两次

我有一个模态，该模态使用js动态显示内容。模态 html 是这样的：我有一个模态，该模态通过使用 js 动态显示内容。模态 html 是这样的： <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> 然后模态使用我提供的模板将内容附加到“modalBody”内。内容正文模板的一个示例是： <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> @if (Model.EduLevelDropdownList != null) { foreach (var level in Model.EduLevelDropdownList) { <option>@level.CodeName</option> } } </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name"> <option></option> <option value="0">Other</option> @if (Model.EduInstitutionDropdownList != null) { foreach (var institute in Model.EduInstitutionDropdownList) { <option>@institute.CodeName</option> } } </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1"> <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;"> <i class="fas fa-save"></i> Update </button> </div> </div> 这是我的 JavaScript 代码，它动态更改模式的内容： <script> // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function () { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content TMCEWoFileUpl("250", ""); }); </script> 问题是，当我在页面加载后打开模式时，它会显示两个下拉菜单：一个功能正常，而另一个似乎是重复的并且不起作用。但是，当我第二次打开模式时，下拉列表会正确显示并且不会重复。有人可以帮我解决这个问题吗？我尝试过在模态之外初始化它，但仍然不起作用。这是现场演示： // Function to load different template content into the modal function loadModalContent(templateId, title) { // Clear previous content to prevent duplication $('#modalBody').empty(); $('#modalBody .select2normalWithouClear').select2('destroy'); // Load new content and set the title var templateContent = $('#' + templateId).html(); // Get the content of the template $('#modalBody').html(templateContent); // Inject content into the modal body $('#modalTitle').text(title); // Set the modal title $('#modalBody .select2normalWithouClear').select2({ placeholder: $(this).data('placeholder') }); $('.edu-instituteNameOther').hide(); $('#modal').modal('show'); // Show the modal } // Event listener for buttons that trigger the modal with different templates $(document).on('click', '.openModalBtn', function() { var templateId = $(this).data('template'); // Get the template to load var modalTitle = $(this).data('title'); // Get the title for the modal loadModalContent(templateId, modalTitle); // Call the function to load the content //TMCEWoFileUpl("250", ""); }); <link href="~/lib/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet" /> <script src="~/lib/jquery-ui-1.13.2/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <button type="button" class="openModalBtn btn btn-outline btn-primary btn-sm mb-1" data-template="templateModalEducation" data-title="Education"> <i class="fas fa-plus"></i> Add </button> <div id="modal" draggable="true" class="modal fade bd-example-modal-lg hide" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header" style="margin-bottom: 10px;"> <b class="modal-title" id="modalTitle">Modal Title</b> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div id="modalBody" class="modal-body pt-0"> @* Modal content will be injected here *@ </div> </div> </div> </div> <hr> <div id="templateModalEducation"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Year</label> <input type="text" class="form-control edu-year"> <span id="edu-year-validation" class="text-validation"></span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label class="Requiredinput">Level</label> <select class="form-control select2normalWithouClear edu-level" data-placeholder="Select Education Level"> <option></option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option>  </select> <span id="edu-level-validation" class="text-validation"></span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label class="Requiredinput">Institution Name</label> <select class="form-control select2normalWithouClear edu-instituteName" data-placeholder="Select Institution Name" > <option></option> <option value="0">Other</option> <option value="1">Option1</option> <option value="2">Option2</option> <option value="3">Option3</option>  </select> <span id="edu-instituteName-validation" class="text-validation"></span> </div> <div class="form-group"> <input type="text" class="form-control edu-instituteNameOther"> </div> <span id="edu-instituteNameOther-validation" class="text-validation"></span> </div> </div> <div class="modal-footer d-flex justify-content-end m-0 p-0"> <button id="addEducationRowToMainForm" data-target-table="#tableEducation" type="button" class="btn btn-outline btn-primary btn-sm mb-1" > <i class="fas fa-plus"></i> Add </button> <button id="updateEducationRow" type="button" class="btn btn-outline btn-primary btn-sm mb-1" style="display: none;" > <i class="fas fa-save"></i> Update </button> </div> </div> 如果我的问题不清楚，我很抱歉，我对这个领域还是新手。不过，我根据 GitHub 问题中“aurelian-scarlat”的评论找到了一个解决方案： https://github.com/Meteor-Community-Packages/meteor-autoform-select2/issues/44 我无法使用类名“.select2normalWithouClear”，因为还有一些其他元素具有相同的类。所以我所做的就是为我的所有选择赋予相同的新类名称，并像这样初始化它们： <select class="form-control select2normalWithouClear edu-level mySelectDropdown" data-placeholder="Select Education Level"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> <select class="form-control select2normalWithouClear edu-instituteName mySelectDropdown" data-placeholder="Select Institution Name"><option>Test 1</option><option>Test 2</option><option>Test 3</option></select> 初始化它： $('.mySelectDropdown').select2({ placeholder: $(this).data('placeholder') });

javascript html jquery bootstrap-modal jquery-select2

回答 1 投票 0

清除按钮与占位符重叠

我的清除按钮与占位符重叠：你有遇到过这个问题吗？我正在为 select2 使用 bootstrap5 主题。其他一切都有效。正是这个按钮导致了问题。谢谢...

javascript jquery bootstrap-modal bootstrap-5 jquery-select2

回答 1 投票 0

更改 React Bootstrap Modal.Header closeButton 图标

我正在使用 React Bootstrap Modal。我正在尝试更改 closeButton 图标。但这没有用。购物车我正在使用 React Bootstrap Modal。我正在尝试更改 closeButton 图标。但没有成功。 <Modal.Header className='modal-head' closeButton> <Modal.Title>Cart</Modal.Title> </Modal.Header> 我不认为react-bootstrap库本身提供任何这样的东西。尽管您可以做的是在模式标题中添加一个右对齐的图标，并添加一个 onClick 操作来更改模式的打开状态并关闭它。 *你可以看看这个例子，也许你会更清楚。您只需导入 LoginButton 即可。专注于 handleShow export const LoginButton = () => { const [fullscreen, setFullscreen] = useState(true); const [show, setShow] = useState(false); function handleShow(breakpoint) { setShow(breakpoint); setFullscreen(true); } return ( <div> <Button className="me-2 mb-2" onClick={() => handleShow(true)}> Login </Button> <Modal className="Modal_Login" show={show} fullscreen={fullscreen} onHide={() => setShow(false)} > <Modal.Header className="Modal_Login_header" > <Modal.Title className=" Modal_Login_header_title col-md-4" >Login</Modal.Title> <Button className="col-md-2" onClick={() => handleShow(false)}> CLose </Button> </Modal.Header> <Modal.Body>Modal body content</Modal.Body> </Modal> </div> ) }; CSS： .Modal_Login{ display: flex; flex-direction:row; } .Modal_Login_header{ display: flex; flex-direction:row; justify-content: flex-end; } 简单来说，您无法使用 react-bootstrap 更改图标或颜色。因为图标是由来自 SVG 的标签 CSS 创建的，其中属性 --bs-btn-close-bg 是图标本身。所以，我认为它在 CSS 文件中创建自定义标签的唯一方法，如下所示： .btn-close { --bs-btn-close-bg: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'> <path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l- 6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0- 1.414z'/> </svg> ") !important; } 要更改图标，请修改标签 path 和为您提供首选图标的属性 viewbox。并放置 !important 来接受这个 attribute 无论需要什么，FontAwesome 都可以使用您想要的任何图标的 SVG（我谈论的是免费的）： .btn-close { --bs-btn-close-bg: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 448 512" fill='white'> <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0- 45.3s-32.8-12.5-45.3 0l-160 160z"/> </svg> ") !important; } 或者如果你想改变颜色改变属性fill='whatever you want'，你可以使用rgba，rgb，#code-color。 fill="rgb(13 110 253)" //or fill="#84b6f4" //or fill="rgba(0, 255, 25, 0.8)" 这个例子是纯 HTML 和 CSS，但逻辑是相同的，因为这里唯一重要的东西来自 App.css 或你的 file.css .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'><path d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/></svg>") !important } <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body>  <div class="text-center"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> </div> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>

html css reactjs bootstrap-modal react-bootstrap

回答 3 投票 0

引导模式错误：“未捕获的类型错误：非法调用”

我正在尝试动态渲染此 Bootstrap 模式的内容，但我不断收到此调用错误。我开始怀疑 Bootstrap 无法渲染具有模板的 modalBody

javascript html jquery twitter-bootstrap bootstrap-modal

回答 1 投票 0

无法读取模态弹出窗口 Bootstrap 5.1 中未定义的属性“classList”

我在 bootstrap 5.1 模式弹出窗口中遇到问题并收到错误 Cannot read property 'classList' of undefined 。我尝试了显示模式弹出窗口的两个代码，但仍然存在相同的问题。我想要...

javascript bootstrap-modal

回答 4 投票 0

Bootstrap 5 模态未显示

我已将 Bootstrap 5 作为 Nuget 包包含在内，并尝试在页面上设置模式。 Bootstrap 5 的其他方面都按预期工作。我已将 Bootstrap 5 作为 Nuget 包包含在内，并尝试在页面上设置模式。 Bootstrap 5 的其他方面正在按预期工作。 <div class="col-12"> <button type="button" class="btn entry-button" data-bs-toggle="modal" data-bs-target="#logInModal">Log In</button> <div class="modal" id="logInModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> It works </div> <div class="modal-body"> It works </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <button type="button" class="btn entry-button">Create Account</button> </div> 我正在一个带有 ASP.NET 后端的 Angular 项目中执行此操作。编辑：该按钮在窗口中显示正常，我可以单击它，并且控制台中没有发生错误。我还没有使用过“index.html”文件。就是这个： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>ActreelClient</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html> 所有其他引导功能都工作正常。安装引导程序和@types/boostrap npm i bootstrap npm i @types/boostrap 更改 angular.json 以包含 bootstrap.css 和 bootstrap.bundle.min.js "scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "src/global_styles.css"], 只需复制 bootstrap 中的示例即可注意：在这个 stackblitz 中，如果您想要一些灵感，我会使用最流行的引导组件。

angular bootstrap-modal bootstrap-5

回答 1 投票 0

bootstrap-modal 相关问题

最新问题