bootstrap-modal 相关问题

NgbModal 如何使模态框从右到左显示而不是默认的从上到下

我正在使用 NgbModal，打开时模态默认从上到下打开。是否可以使其从右向左显示。我已经设置了定位......

Bootstrap 模式中的 Flatpickr 无法输入年份

我在 Bootstrap 模式中使用 Flatpickr 渲染时遇到问题。 当我在模式中打开 Flatpickr 条目时，除了输入年份之外，一切似乎都工作正常。当我想点击 y...

通过django将数据显示为模态形式

我对 django 非常陌生。单击详细信息按钮后，我试图以模式形式显示学生记录的详细信息。但它显示的是一个空的模态形式。下面是代码片段。普...

使 Bootstrap 不可关闭模态再次可关闭

我使用此代码使 Bootstrap 3.4.1 模态不可关闭——不允许用户在模态之外单击或使用 Esc 关闭它，同时仍然允许正常的 .modal("hide" )...

我怎样才能让函数在模态中工作？

我正在编写一个工作脚本，在编写代码的过程中，我更改了代码以在模式中提取大部分 HTML。我的问题是我已经做了很多功能......

Laravel Livewire 隐藏带有点击事件的引导模式

我正在构建一个基于livewire的应用程序，我需要wire:click事件来触发livewire组件类中的函数以及打开Bootstrap Modal。 没有电线：

Blazor 测试页面未打开 Modal

我有以下代码，但当它呈现到浏览器时，它没有 onClick 调用，因此单击按钮没有任何效果（对我来说，这是我的第一个 Blazor 应用程序）： 我有一个 UserComponent...

如何为Boostrap Modal data-bs-target设置动态id？

我需要设置为 Boostrap 模态的动态 id 并引用它。 我需要设置为 Boostrap 模式的动态 ID 并引用它。 <div class="modal" id="questionEdit"> </div > <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#questionEdit">Edit Question</button> 我尝试过以下方法 <div class="modal" th:id= "${question.question_id} + 'question_editModal' "> </div > <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#${question.question_id} + 'question_editModal'">Edit Question</button> 但这不起作用。谁能帮我解决这个问题吗？ 好吧，我想我明白了。至少就我而言，它正在发挥作用。所以对于你的代码来说，它应该是这样的： <div class="modal" th:id= {`question_editModal${question.question_id}`}> </div > 和： <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target={`#question_editModal${question.question_id}`}>Edit Question</button> 请告诉我它是否适合您。 我也有同样的问题。但我创建的 id 是数值。当我在 id 前面添加几个字符时，它按我的预期工作。我希望它可以帮助你。 CSS3 不允许只为类或 id 分配数字。 #456 或 .456 无效，如果我们添加 #id456 或 .id456 则有效。

当 svg 放置在 Bootstrap 5 Modal 中的 img 标签中时，svg 内的链接（超链接）不起作用

事实上，当指针悬停在包含超链接的部分上时，其形状甚至没有改变。当我在浏览器中单独打开 svg 文件时，链接工作正常。下面是...

如何使用动画调整 Bootstrap 模式宽度

我想在单击按钮后调整 Bootstrap 5 模式宽度。我当前的代码效果很好。 但现在我想在这种变化变得更大时为其设置动画。 我尝试过动画过渡...

.NET Core 8 中的 Bootstrap 模式未正确呈现

我有一个简单的引导程序模式，但它在 .NET Core 8 项目中无法正确显示，我的应用程序中的所有其他引导程序元素都正常工作，我将引导程序安装为客户端li...

Jquery 在点击链接上将数据属性传递给模式

我正在尝试将一些自定义数据属性传递到通过链接打开的模式。 HTML 片段如下： 我正在尝试将一些自定义数据属性传递到通过链接打开的模式。 HTML 片段如下： <div class="btn-group"> <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button> <ul class="dropdown-menu" role="menu"> <li> <a id="modal_contact" data-userName="User1" data-toggle="modal" href="#option_contact"> <i class="fa fa-check-square-o"></i> Contact</a> </li> </ul> </div> 模态片段如下： <div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button aria-hidden="true" class="close" data-dismiss="modal" type="button"></button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div> 我似乎无法使用属性“data-userName”的值设置“modal-title”。 我认为jquery会这样做（仅插入警报以查看值是否传递）： $('#modal_contact').on('click', function() { var $el = $(this); var $username = $el.data('userName'); alert(username); }); 但似乎不起作用。正确的方法是什么？ 尝试使用引导模式的事件回调而不是点击处理程序： $('#option_contact').on('shown.bs.modal', function() { var $el = $("#modal_contact"); var $username = $el.data('userName'); alert(username); }); 为了设置数据，不要使用驼峰命名法。安装使用这样的东西data-user_name="User1" $('#modal_contact').on('click', function() { var $el = $(this); var $username = $(this).data('user_name'); alert($username); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group"> <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button> <ul class="dropdown-menu" role="menu"> <li> <a id="modal_contact" data-user_name="User1" data-toggle="modal" href="#option_contact"> <i class="fa fa-check-square-o"></i> Contact</a> </li> </ul> </div> <div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button aria-hidden="true" class="close" data-dismiss="modal" type="button"></button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div> 注意 data-* 属性由两部分组成： 属性名称不能包含任何大写字母，并且在前缀“data-”之后必须至少有一个字符 属性值可以是任意字符串 请检查以下片段。您将正确找到用户名。在您的代码中，您提到了“userName”来获取应为“username”的属性值。 $(document).ready(function(){ $('#modal_contact').on('click', function() { var $el = $(this); var $username = $el.data('username'); alert($username); $(".modal-title").html($username); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group"> <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button> <ul class="dropdown-menu" role="menu"> <li> <a id="modal_contact" data-userName="User1" data-toggle="modal" href="#option_contact"> <i class="fa fa-check-square-o"></i> Contact</a> </li> </ul> </div> <div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button aria-hidden="true" class="close" data-dismiss="modal" type="button"></button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div> 这里是预览代码解决方案 <!DOCTYPE html> <html> <head> <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <script> $(document).ready(function() { $('#modal_contact').on('click', function() { var userName = $(this).attr("data-userName"); $('.modal-title').append(userName); }); }); </script> </head> <body> <div class="btn-group"> <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button> <ul class="dropdown-menu" role="menu"> <li> <a id="modal_contact" data-userName="User1" data-toggle="modal" href="#option_contact"> <i class="fa fa-check-square-o"></i> Contact</a> </li> </ul> </div> <div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button aria-hidden="true" class="close" data-dismiss="modal" type="button"></button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div> </body> </html> $('#modal_contact').on('click', function() { var $el = $(this); var $username = $(this).data('user_name'); alert($username); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group"> <button aria-expanded="false" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown" id="button_action" type="button">Action <i class="fa fa-angle-down"></i></button> <ul class="dropdown-menu" role="menu"> <li> <a id="modal_contact" data-user_name="User1" data-toggle="modal" href="#option_contact"> <i class="fa fa-check-square-o"></i> Contact</a> </li> </ul> </div> <div class="modal fade" data-backdrop="static" data-keyboard="false" id="option_contact" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button aria-hidden="true" class="close" data-dismiss="modal" type="button"></button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div>

无法在 yii2 中正确查看弹出模式

我试图在单击按钮时显示弹出模式。但是，当我单击该按钮时，它会显示一小段时间，然后消失，使屏幕变黑。 下面是我的代码 我试图在单击按钮时显示弹出模式。但是当我点击按钮时，它会显示一小会儿，然后消失，屏幕变黑。 下面是我的代码 <?PHP use kartik\select2\Select2; use yii\helpers\Html; use yii\helpers\Url; use yii\widgets\Pjax; use kartik\export\ExportMenu; use kartik\grid\GridView; /* @var $this yii\web\View */ /* @var $searchModel app\models\InstallationsSearch */ /* @var $dataProvider yii\data\ActiveDataProvider */ $this->title = 'Installations'; $this->params['breadcrumbs'][] = $this->title; ?> <section class="content-header"> <h1><?= Html::encode($this->title) ?></h1> </section> <section class="content"> <div class="box"> <div class="box-body"> <div id="statusMsg" > <?= Yii::$app->session->getFlash('no');?> <?= Yii::$app->session->getFlash('error');?> <?= Yii::$app->session->getFlash('success');?> <?= Yii::$app->session->getFlash('errors');?> </div> <div class="built" style="overflow: hidden; overflow-y: hidden; height: ?"> <?php $gridColumns =[ [ 'class'=>'kartik\grid\SerialColumn', ], [ 'class' => 'kartik\grid\ActionColumn', 'template' => '{view} {update} {delete}', 'buttons' => [ 'delete' => function ($url, $model) { return Html::a('<span class="glyphicon glyphicon-trash"></span>', '#', [ 'class' => 'kv-row-select', 'data-id' => $model->id, 'data-toggle' => 'modal', 'data-target' => '#deleteModal', 'data-confirm' => false, // Disable built-in confirmation 'data-method' => false, // Disable data-method attribute to avoid default delete behavior ]); }, ], ], 'meter_msn', 'old_ref_no', [ 'attribute' => 'm_sub_div', 'value' => function ($d) { if(is_object($d->subdiv)) return $d->subdiv->name; return ' - '; }, 'filter' => Select2::widget([ 'model' => $searchModel, 'attribute' => 'm_sub_div', 'data' => \common\models\SurveyHescoSubdivision::toArrayList(), 'options' => ['placeholder' => 'Sub-Div'], 'pluginOptions' => [ 'allowClear' => true, ], ]), ], 'consumer_name', 'consumer_address', [ 'label' => 'Meter Installation Location', 'value' => function($model){ return $model['latitude'] . ' , ' . $model['longitude']; } ], 'mount_material', [ 'label' => 'AMR Inst. Date', 'value' => function ($model) { return date("d-m-Y", strtotime($model->sync_date)); }, ], [ 'label' => 'Install Status', 'value' => function ($d) { return $d->istallation_status; }, 'filter' => Html::activeDropDownList($searchModel, 'istallation_status', \app\models\Installations::getInstallStatus(), ['prompt' => "Install Status", 'class' => 'form-control']), ], [ 'label' => 'Meter Type', 'value' => function ($d) { if(is_object($d)) return $d->meter_type; return ' - '; }, 'filter' => Html::activeDropDownList($searchModel, 'meter_type', \app\models\Meters::getMeterTypeValues(), ['prompt' => "Meter Type", 'class' => 'form-control']), ], 'electrician_name', [ 'attribute' => 'created_by', 'value' => function ($model) { if(is_object($model->user)){ return $model->user->username; } return ''; }, 'filter' => Select2::widget([ 'model' => $searchModel, 'attribute' => 'created_by', 'data' => \app\models\User::toArrayList(), 'options' => ['placeholder' => 'Select a User'], 'pluginOptions' => [ 'allowClear' => true, ], ]), ], ]; echo ExportMenu::widget([ 'dataProvider' => $dataProvider, 'columns' => $gridColumns, 'dropdownOptions' => [ 'label' => 'Export All', 'class' => 'btn btn-info', ], 'exportConfig' => [ ExportMenu::FORMAT_PDF => false, ExportMenu::FORMAT_TEXT => false, ExportMenu::FORMAT_HTML => false, ExportMenu::FORMAT_CSV => false, ], 'filename' => 'LESCO_Installation_Data_' . date('d-M-yy') ]); echo GridView::widget([ 'dataProvider' => $dataProvider, 'filterModel' => $searchModel, 'columns' => $gridColumns, ]); ?> </div> </div> </div> </section> <!-- Delete Confirmation Modal --> <div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Delete Confirmation</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Are you sure you want to delete this item?</p> <form id="deleteForm" method="post" action="<?= Url::to(['installations/delete']) ?>"> <input type="hidden" name="_csrf" value="<?= Yii::$app->request->csrfToken ?>"> <input type="hidden" id="delete-id" name="id"> <div class="form-group"> <label for="delete-reason">Reason for deletion:</label> <textarea class="form-control" id="delete-reason" name="delete_reason" required></textarea> </div> <input type="hidden" name="deleted_by" value="<?= Yii::$app->user->identity->id ?>"> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" id="submitDelete" class="btn btn-danger">Delete</button> </div> </div> </div> </div> <?PHP $script = <<< JS function initializeModalEvents() { $('.kv-row-select').off('click').on('click', function() { console.log('Delete button clicked'); var id = $(this).data('id'); $('#delete-id').val(id); $('#deleteModal').modal('show'); console.log('Modal shown with ID: ' + id); }); $('#submitDelete').off('click').on('click', function(event) { event.preventDefault(); var form = $('#deleteForm'); var reason = $('#delete-reason').val().trim(); if (reason === '') { alert('Reason for deletion is mandatory.'); return false; } console.log('Submitting form'); $.ajax({ url: form.attr('action'), type: 'post', data: form.serialize(), success: function(response) { console.log('Form submitted successfully'); if (response.success) { $('#deleteModal').modal('hide'); $.pjax.reload({container:'#w0-pjax'}); } else { alert('An error occurred while deleting the item.'); } }, error: function() { console.log('Form submission error'); alert('An error occurred while deleting the item.'); } }); }); } $(document).ready(function() { setTimeout(function() { $('#statusMsg').fadeOut('fast'); }, 5000); // <-- time in milliseconds initializeModalEvents(); $(document).on('pjax:success', function() { initializeModalEvents(); }); }); JS; $this->registerJs($script); ?> 图形用户界面 如上图所示，弹出窗口显示了很短的时间，然后关闭。 我已尝试尽可能解决此问题，但我陷入困境。 我怎样才能实现它？ 任何帮助将不胜感激。 $('#deleteModal').modal('show'); 删除它，因为“data-toggle”已经默认引导脚本js打开模式。

引导模式，仅在输入值匹配时关闭

我是编码新手，非常初级。我想要简单的 Bootstrap 5 模式，其中只有两个选项。 输入 关闭按钮 我希望关闭按钮仅在输入值为 123 时才起作用。 谢谢 前...

如何在关闭模态框后不改变swiper滑动位置

我尝试将滑动幻灯片和模态结合起来，并将slidesPerView设置为3。但是，我发现在关闭第二个或第三个模态后，幻灯片将转到第一个幻灯片位置

在 Bootstrap Modal 上捕获关闭事件

我有一个 Bootstrap Modal 来选择事件。 如果用户单击 X 按钮或模式之外，我想将它们发送到默认事件。 我怎样才能捕获这些事件？ 这是我的 HTML ...

React：从回调访问时，State 内部的数组未定义

我有一个回调函数，它应该编辑数组中的值，该数组位于状态内部。当我尝试访问 dataZähler 时，即数组本身，我得到了未定义/长度为 0 的数组...

Bootstrap Modal 导致 useEffect({...}, []) 再次触发

使用 Bootstrap 组件时，当我对父组件进行回调时，我的入口页面会重新渲染，并触发我的 useEffect({...}, [])-Hook，该钩子应该只被调用一次...

在vue中使用自定义模态，在另一个组件内两次仅渲染第一个组件数据

所以问题是我正在使用 Laravel Vue 应用程序，两者是不同的应用程序。我面临的问题是我在 VUE JS 中使用 bootstrap 创建了一个模态组件。 一个...

引导模式组件未显示

我的 app.tsx 中有这个： 返回 （ <> {console.log(showModal)} {showModal === true && } ）； 我警察...