标签: bootstrap-modal

我刚刚在这篇文章中读到，您可以通过以下方式更改引导模式宽度：

.modal .modal-dialog { width: 800px; }

但是当我这样做时，我失去了模态的默认响应能力。

如何更改宽度但保持移动设备的响应能力？

PS我不太擅长javascript，我知道有人问过这个问题，但解决方案不适用于我的问题，所以我会再次问这个问题。

我被这个问题困住了，还没有找到解决方案。我想清除我的模态关闭后发生的所有事情。

我的模态是表单模态，所以每当我点击提交时，codeigniter 验证消息将通过使用 ajax on 显示<div style="font-size:10px;width:50%;" id="info"></div>。现在，每当我关闭模态时，当我重新打开它时，验证消息都会保留。关闭模态后应该怎么做才能清除它们？

这是ajax调用的函数：

public function addcomp () {
  $this->load->library('form_validation');
  $this->load->helper('security');
  $this->form_validation->set_rules('comp_name','Computer Name','trim|required|callback_pc_exist');
  $this->form_validation->set_rules('status','Status','trim|required');
  $this->form_validation->set_rules('location','Location','trim|required');

  if ($this->form_validation->run()) {

    $this->load->model('asset_model');
    $result=$this->asset_model->addpc();

    if (!$result) {
      echo mysqli_error($result);
    } else {
      echo "<div class='alert alert-success alert-dismissable'>
      <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
      Computer Successfully Added!</div>";
    }
  }
  echo validation_errors("<div class='alert alert-danger alert-dismissable'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>","</div>");
}

这是提交调用的ajax：

$(document).ready(function(){
  $("#addpc").submit(function(){
    var formdata=$("#addpc").serialize();
    $.ajax({
      url:"asset_management/addcomp",
      type:"POST",
      data: formdata,
      async: true,
    }).done(function( formdata ) {
      $('#info').html(formdata);
      $("#addpc")[0].reset();
      viewdata(); …

问题是当我在模态之外使用 popover 时，它会按预期运行，当您向下滚动时，popover 它会粘在触发 popover 的元素上。

但是当我在模态中使用它时，问题从那里开始，它没有坚持触发弹出窗口的元素。我正在使用此代码初始化 popover。请参考这个演示。

    $('#popover1').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });

我阅读了很多关于如何在 Bootstrap Modal 中使用 CKEditor 的解决方案？他们都不为我工作。我感到绝望...... js fiddle <-我目前使用的代码：

• jQuery 3.1.1
• 引导程序 3.3.7
• 编辑器 4.6.2

我的 html 头：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>

我的模态：

<button type="button" data-toggle="modal" data-target="#modal">Launch modal</button>    
<!-- Modal -->
    <div class="modal fade" id="modal" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <form enctype="multipart/form-data" action="" method="post" class="form-horizontal">
            <div class="modal-body">
              <div class="form-group">
                <label for="text" class="col-lg-2 control-label">CKeditor:</label>
                <div class="col-lg-10">
                    <textarea class="form-control"  name="text" rows="8" maxlength="400" minlength="20" required></textarea>
                </div>    
              </div>
            </div>
            <div …

我在 Django 的民意调查应用程序中创建了一个链接，看起来我的按钮链接不起作用。我在这里做的错误是什么？

我的 urls.py 是

from django.conf.urls import url

from . import views

app_name = 'polls'

urlpatterns = [
    # ex: /polls/
    #url(r'^$', views.index, name='index'),
    url(r'^$', views.IndexView.as_view(), name='index'),


    url(r'^login/$', views.LoginView.as_view(), name='login'),

    # ex: /polls/5/
    # the 'name' value as called by the {$ url $} template tag
    #url(r'^(?P<question_id>[0-9]+)/$', views.detail, name='detail'),
    url(r'^(?P<pk>[0-9]+)/$', views.DetailView.as_view(), name='detail'),

    # ex: /polls/5/results/
    #url(r'^(?P<question_id>[0-9]+)/results/$', views.results, name='results'),
    url(r'^(?P<pk>[0-9]+)/results/$', views.ResultsView.as_view(), name='results'),

    # ex: /polls/5/vote/
    url(r'^(?P<ballot_id>[0-9]+)/vote/$', views.vote, name='vote'),

]

我创建了这样的按钮和链接

<button type="submit" class="btn btn-primary"><a href="{% url 'polls:index'  %}"></a>
  {% …

如您所见，这是我的第一个问题，但不是我第一次访问 stackoverflow。所以如果我做错了什么，请耐心等待。

我的问题如下：我在 boostrap 模式上遇到了 bootstrap-datepicker 的问题。我打开一个模态来编辑一些数据，所以我使用'show.bs.modal'事件在模态上加载数据。模态中的字段之一是出生日期，我使用 bootstrap-datepicker。当我点击日期选择器字段时，奇怪的行为开始了。它触发'hide.bs.modal'事件，我用它在关闭模态之前清理数据（重置验证器和表单）。

我已经尝试了一切，我到处搜索，但仍然没有发现我做错了什么。请帮帮我！

我正在使用 Bootstrap v3.3.7 和 Datepicker for Bootstrap v1.7.0

这是一个显示问题的片段：

$(document).on('hide.bs.modal', '#editModal', function (e){
    alert("Why is this happening??!!!");
    $('#formEdit').data('bootstrapValidator').resetForm();
    $('#formEdit')[0].reset();
});

$('#fecha_nac').datepicker({
    format: 'dd-mm-yyyy',
    autoclose: true,
    language: 'es'
});

<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.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">Ver y editar sacerdote</h5>
        <button type="button" class="close" data-dismiss="modal" …

我有一个动态创建的表格，每行都有一个按钮......如果我点击按钮，一个模态打开以输入带有暗屏的详细信息在模态后面..点击接受按钮时模态关闭，暗屏必须消失..它有时会消失，而在其他情况下不会。在
出现的模态屏幕中单击接受按钮后，有时我的屏幕会出现这种情况：https : //i.stack.imgur.com/wWnS8.jpg

<td>
<!-- for accepting -->
<button type="button" class="btn btn-default btn-sm tick" data-toggle="modal" data-target="#{{pl.id}}_1" ><i class="fa fa-check" aria-hidden="true" style="color:green" onclick="remainingChar()"></i></button>
 <!-- Modal -->
 <div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
     <div class="modal-dialog">
     <!-- Modal content-->
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Do You want to accept <b>{{pl.employee.emp_name|title }} </b> leave?</h4>
             </div>
             <form action={% url 'm_manage:accept' %}  method="POST">
             {% csrf_token %}
               <div class="modal-body">
                  <p><input type="checkbox" name="email" id="email" class="email" > Notify Via Email<br></p>
                  <p><label for="message">Message</label> …

所以我在我的项目中使用 TinyMCE 编辑器来处理我的所有文本区域。可以在此处找到有关 TinyMCE 编辑器的更多文档。

我有四个不同的按钮，但是让我们只关注一个按钮，我确信代码可以从一个按钮复制到其他按钮，因为我希望所有按钮都具有相同的功能。

这是按钮：

这些按钮会调出 Bootstrap v4 模式。可以在此处找到有关 Modal 的文档。模态示例如下。

现在让我们只关注Reminders Modal。这显然是形式的一部分。当我调出模态时，我在自动聚焦 textarea 时遇到了问题。我正在将模态加载到页面上，但在激活之前保持隐藏状态，但单击按钮。我不是动态渲染这个模态，它是一个静态模态。

所以让我们回顾一下我的代码。请记住，我们此时只关注提醒按钮和模态，因此下面只会显示与该模态相关的代码。

注意：我使用的是 Laravel 5.6，我使用 Laravel Blade 将模态包含在页面中。这些信息不应该对这个问题的答案产生影响，只是说它只是为了以防万一它可能是相关的。

我还使用 Laravel Collective 来在页面上显示文本区域。可以在此处找到有关 Laravel 集体文本区域的更多文档。Laravel Collective 不再是 Laravel 框架的原生版本，因此这些信息也可能相关，但可能性很小。

@include('components.form.part.modals.reminder')

Run Code Online (Sandbox Code Playgroud)

模态(/resources/views/components/form/part/modals/reminder.blade.php)

<!-- Modal -->
<div class="modal fade" id="reminderModal" tabindex="-1" role="dialog" aria-labelledby="reminderModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reminderModalLabel">Reminder</h5>
            </div>
            <div class="modal-body">
                {{ Form::textarea('reminder', null, ['class' => 'form-control', …

我正在尝试在 Django 应用程序的 Bootstrap 模式中显示产品的详细信息。

我将此主题作为参考：堆栈溢出问题。

• HTML 正确调用 AJAX 函数
• AJAX 函数正在打开模态
• 模态调用 URL

但是我收到了 500 内部服务器错误。回应是：

NoReverseMatch at /catalog/product-detail/
'system' is not a registered namespace

关于我做错了什么的任何线索或关于如何实现我的目标的任何建议？

谢谢！

HTML - AJAX 函数调用

<div class="row">
        {% for y in productos %}
            {% if y.categoria_producto|stringformat:"s" == objetivo %}
                    <button data-id="{{y.id}}" type="button" class="btn btn-warning margin-bottom delete-company" >delete</button>   
            {% endif %}
        {% endfor %}
        {% csrf_token %}
</div>

AJAX 代码

$(document).on('click','.delete-company',function(){
    var id = $(this).data('id');

    $.ajax({
        url:'/catalog/product-detail/',
        type:'POST',
        data:{
            'id':id,
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(), …

我想在用户单击创建新链接时打开模态窗口。

默认情况下，Mvc 会自动生成创建视图，但它会在另一个页面中打开。我希望它在 Bootstrap 弹出窗口中加载