bootstrap-modal 相关问题

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

我正在编写一个工作脚本，在编写代码的过程中，我更改了代码以在模式中提取大部分 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 && } ）； 我警察...

显示模式弹出窗口 10 秒或直到设置标志或变量

我是jquery的初学者，所以请原谅我的错误。我想显示一个模态弹出窗口 10 秒或直到设置了标志或变量，然后隐藏此模态弹出窗口，然后打开另一个取决于...

Modal 在本地工作正常，但在托管网络中无法工作

这是我的代码，在本地主机上运行良好，但在托管上不起作用。 {% 扩展 'layout2.html' %} {% 块内容 %} 这是我的代码，在本地主机上运行良好，但在托管上无法运行。 {% extends 'layout2.html' %} {% block content %} <div class="container"> <div class="row"> <ol class="col-12 breadcrumb"> <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li> <li class="breadcrumb-item active">Menu</li> </ol> <div class="col-12"> <h5 style="font-size: 30px">Menu</h5> <hr> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-sm"> <!-- card start --> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/cake.jpeg" alt="Cake" style="width:100%;height: 185px;"> <div class="card-body"> <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.250</span></h5> <h2></h2> <p class="card-text">Different varities of cakes. With customized design. You can select you own flavour. Click below to view details and order.</p> <a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-primary" style="width: 100%"> View Details</a> <!-- <button type="button" class="btn btn-info btn-lg" >Open Modal</button> --> <!-- Modal-1 --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Order cake now.</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4"> <img src="../static/images/cake.jpeg" alt="" style="widows: 100px;height: 185px;"> </div> <div class="col-md-8"> <address > <h6> Product Name: Cake</h6> <h6> Product Flavour: customized</h6> <h6> Product category: Best seller</h6> <hr> <h6> Availible in both veg and non-veg.</h6> <h6> Weight of cake is as per customer reqirement.</h6> <h6> You can place order below.</h6> </address> </div> </div> <hr> <form action="{% url 'home' %}" method="POST"> {% csrf_token %} <div class="form-row"> <div class="col-md-6"> <label>Customer Name</label> <input type="text" placeholder="Full Name" class="form-control" name="name" required> </div> <div class="col-md-6"> <label>Email</label> <input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div> </div> <div class="form-row"> <div class="col-md-6"> <label>Product name</label> <input type="text" placeholder="Cake" value="cake" class="form-control" name="product" readonly> </div> <div class="col-md-6"> <label>Select category</label><br> <select name="category" id="" style="width:180px"> <option value="Veg">Veg</option> <option value="Non-veg">Non-veg</option> </select> </div> </div> <div class="form-row"> <div class="col-md-6"> <label>Quantity</label> <input type="text" placeholder="Quantity" class="form-control" name="quantity" required> </div> <div class="col-md-6"> <label>Mobile</label> <input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div> </div> <div class="form-group"> <label for="">Address</label> <textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Order</button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal-1 --> </div> </div> </div> <!-- card end --> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/pin.jpg" alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Rolls <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.20</span></h5> <h2></h2> <p class="card-text">A roll can be served and eaten whole or cut transversely and dressed with filling between the two halves.Click below to order.</p> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal2" style="width: 100%">Order Now</a> <!-- Modal --> <!-- Modal-2 --> <div id="myModal2" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Order now.</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4"> <img src="../static/images/pin.jpg" alt="" style="width: 220px;height: 185px;"> </div> <div class="col-md-8"> <address > <h6> Product Name: Rolls</h6> <h6> Product Flavour: Regular</h6> <h6> Product category: Best seller</h6> <hr> <h6> Availible in both veg and non-veg.</h6> <h6> Made with best flour.</h6> <h6> You can place order below.</h6> </address> </div> </div> <hr> <form action="{% url 'home' %}" method="POST"> {% csrf_token %} <div class="form-row"> <div class="col-md-6"> <label>Customer Name</label> <input type="text" placeholder="Full Name" class="form-control" name="name" required> </div> <div class="col-md-6"> <label>Email</label> <input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div> </div> <div class="form-row"> <div class="col-md-6"> <label>Product name</label> <input type="text" placeholder="rolls" value="Rolls" class="form-control" name="product" readonly> </div> <div class="col-md-6"> <label>Select category</label><br> <select name="category" id="" style="width:180px"> <option value="Veg">Veg</option> <option value="Non-veg">Non-veg</option> </select> </div> </div> <div class="form-row"> <div class="col-md-6"> <label>Quantity</label> <input type="text" placeholder="Quantity" class="form-control" name="quantity" required> </div> <div class="col-md-6"> <label>Mobile</label> <input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div> </div> <div class="form-group"> <label for="">Address</label> <textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Order</button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal --> </div> </div> </div> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/tray.jpeg" alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Cookies <span class="badge badge-danger">HOT</span> <span class="badge badge-light">Rs.50 per pack</span></h5> <h2></h2> <p class="card-text">These cookie recipes represent the best of the best, including chewy chocolate chip cookies.Click below for order .</p> <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal3" style="width: 100%">Order Now</a> <!-- Modal --> <!-- Modal-3 --> <div id="myModal3" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Order now.</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-4"> <img src="../static/images/tray.jpeg" alt="" style="width: 220px;height: 185px;"> </div> <div class="col-md-8"> <address > <h6> Product Name: Cookies</h6> <h6> Product Flavour: Regular-chocolate</h6> <h6> Product category: Best seller</h6> <hr> <h6> Availible in both veg and non-veg.</h6> <h6> Made with best flour.</h6> <h6> You can place order below.</h6> </address> </div> </div> <hr> <form action="{% url 'home' %}" method="POST"> {% csrf_token %} <div class="form-row"> <div class="col-md-6"> <label>Customer Name</label> <input type="text" placeholder="Full Name" class="form-control" name="name" required> </div> <div class="col-md-6"> <label>Email</label> <input type="email" placeholder="@gmail.com" class="form-control" name="email" required></div> </div> <div class="form-row"> <div class="col-md-6"> <label>Product name</label> <input type="text" placeholder="rolls" value="cookies" class="form-control" name="product" readonly> </div> <div class="col-md-6"> <label>Select category</label><br> <select name="category" id="" style="width:180px"> <option value="Veg">Veg</option> <option value="Non-veg">Non-veg</option> </select> </div> </div> <div class="form-row"> <div class="col-md-6"> <label>Quantity</label> <input type="text" placeholder="Quantity" class="form-control" name="quantity" required> </div> <div class="col-md-6"> <label>Mobile</label> <input type="text" placeholder="Mobile" class="form-control" name="mobile" required></div> </div> <div class="form-group"> <label for="">Address</label> <textarea name="address" id="" cols="100" rows="3" style="width:100%"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Order</button> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal-3 --> </div> </div> </div> </div> </div> </div> <br> <br> <!-- <div class="container"> <div class="row"> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/pastries.jpeg" alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5> <h2></h2> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a> </div> </div> </div> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/donuts.jpeg " alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5> <h2></h2> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a> </div> </div> </div> <div class="col-sm"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../static/images/breads.jpg" alt="Cake" style="width:100%"> <div class="card-body"> <h5 class="card-title">Cake <span class="badge badge-danger">HOT</span> <span class="badge badge-light">$4.99</span></h5> <h2></h2> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Order Now</a><a href="#" class="btn btn-primary offset-sm-1">Comments</a> </div> </div> </div> </div> </div> </div> --> {% endblock %} 我使用了引导模式。它在本地主机中运行良好。但是当我在 pythonanywhere 上托管 Django 网站时，所有模式都不起作用。下拉菜单也不起作用。但是除了这两个之外的每个引导组件都工作正常。 引导加载可能存在问题。 在{% block content %}标签之后，尝试复制并粘贴到bootstrap的CDN下方。 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <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/[email protected]/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> 如果您的代码有效，请删除上述 CDN 并根据 bootstrap starter 模板调整您的layout2.html https://getbootstrap.com/docs/4.5/getting-started/introduction/ <button data-target="#myModal" ...> 以 id="myModal" 为目标模态，但您的模态具有 id="#myModal"。 #前缀表示“id of”（它是一个CSS选择器）。与 .modal 相同，意思是“modal 班级”。 总之，将id="#myModal"更改为id="myModal"即可。 我对你的问题是：如果它在本地工作，这显然意味着在本地你已经正确编写了它。为什么要在上传之前更改它？ 原则是：远程上传本地的内容，无需修改任何内容！ 除此之外，请注意您还有一堆需要修复的404（未找到）错误。 控制台是你的朋友。 回答这个问题可能已经晚了，但不要忘记每次静态文件更改时在生产服务器上运行collectstatic。

引导模式无法打开

我的 html 文件中有一个模式，我想用按钮触发它。 我的按钮位于表格内。这是我的按钮的代码： 我的 html 文件中有一个模式，我想用按钮触发它。 我的按钮位于表格内。这是我的按钮的代码： <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#squarespaceModal" > <!-- [routerLink]="['/function', bfunc.AName]" --> <i class="fa fa-pencil" aria-hidden="true"></i> </button> 这是我在同一个 html 文件中的模态代码： <!-- line modal --> <div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h3 class="modal-title" id="lineModalLabel">My Modal</h3> </div> <div class="modal-body"> <!-- content goes here --> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> <div class="btn-group btn-delete hidden" role="group"> <button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button> </div> <div class="btn-group" role="group"> <button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button> </div> </div> </div> </div> </div> </div> 当我按下按钮时什么也没有发生。 我检查了控制台，但没有错误 有人可以帮助我吗？ 编辑： 我已将这些脚本导入到我的 index.html 中 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 您需要导入 bootstrap css https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css 正如前面提到的，您需要确保导入所有资源（js、css、jquery）才能使模式正常工作。这是一个简单的 html 文件，其中包含模态代码和头部的所有资源。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html> 由于“data-bs-toggle =“modal”data-bs-target =“#exampleModal”而发生在我身上。您必须使用“bs”而不是“mdb”，或者如果只有 data-toggle 那么它行不通。这完全取决于您使用的引导版本。对我来说它是 v5.2。

jquery 模式和自动完成功能不适用于回发按钮

我在使用母版页的 asp.net 网站上遇到问题，我希望在其中有一个 jquery 模式，用户可以在其中搜索和提交文本。我想获得带有回发的插入文本...