取消引导警报会导致包含模态也被取消

时间：2019-03-23 02:08:52

标签： twitter-bootstrap bootstrap-4

我有这段代码可在模式顶部显示警报，但是当我单击警报的“ x”按钮将其关闭时，模式本身即被关闭。我完全遵循官方的BS文档，使用data属性将警报设置为可消除，因此我找不到与此有关的代码有什么问题，但是也许我遗漏了一些东西，因此任何人都可以帮助我弄清楚为什么会发生这种情况，怎样才能只显示要删除的警报而保留显示的模态？我正在使用Bootstrap 4。

<div id="modal-holder"><div class="modal fade show" id="wsModal" style="padding-right: 15px; display: block;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form class="simple_form work-log-form" id="new_work_log" novalidate="novalidate" data-modal="true" action="/app/ws/work_logs" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><div class="modal-header">

                        <button class="close" data-dismiss="modal" type="button">×</button>
                    </div>
                    <h4 class="modal-title">
                        Timesheet entry for March 23
                    </h4><div class="modal-body work-log-modal">
                        <div class="alert alert-warning alert-dismissible">This is your day off - are you sure you want to log time?
                            <button class="close" type="button" data-dismiss="alert"><span aria-hidden="true">×</span></button>
                        </div>

                        <div class="form-group hidden work_log_day"><input class="form-control hidden" type="hidden" value="2019-03-23" name="work_log[day]" id="work_log_day"></div>
                        <div class="form-group select required work_log_project_assignment_id"><label class="form-control-label select required" for="work_log_project_assignment_id">Project assignment <abbr title="required">*</abbr></label><select class="form-control select required" name="work_log[project_assignment_id]" id="work_log_project_assignment_id"><option value="101">QA Football Inception</option>
                                <option value="103">QA Soccer Delivery</option>
                                <option value="76">QA Hoodies</option></select></div>
                        <div class="form-group string required">
                            <label class="form-control-label string required" for="work_log_time_worked">
                                Time worked
                                <abbr title="required">*</abbr>
                            </label>
                            <div class="time-worked-wrapper">
                                <div class="form-group string required work_log_time_worked"><input class="form-control string required" data-formatter="hours_count_formatter" placeholder="0:00" type="text" name="work_log[time_worked]" id="work_log_time_worked"><small class="form-text text-muted">Allowed time entries in intervals of 15 minutes</small></div>
                            </div>
                        </div>
                        <div class="form-group text required work_log_description"><label class="form-control-label text required" for="work_log_description">Description <abbr title="required">*</abbr></label><textarea class="form-control text required" name="work_log[description]" id="work_log_description"></textarea></div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-outline-secondary" data-dismiss="modal" type="button">
                            Cancel
                        </button>
                        <input type="submit" name="commit" value="Create" class="btn btn-primary" data-disable-with="Create">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

这是呈现标记时的样子：

enter image description here

1 个答案:

答案 0 :(得分：0)

代码的症结所在-控制台上也应该没有错误

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <h1>Sample Bootstrap Page</h1>
</div>

<div id="modal-holder">
  <div class="modal fade show" id="wsModal" style="padding-right: 15px; display: block;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <form class="simple_form work-log-form" id="new_work_log" novalidate="novalidate" data-modal="true" action="/app/ws/work_logs" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓">
          <div class="modal-header">

            <button class="close" data-dismiss="modal" type="button">×</button>
          </div>
          <h4 class="modal-title">
            Timesheet entry for March 23
          </h4>
          <div class="modal-body work-log-modal">
            <div class="alert alert-warning alert-dismissible">This is your day off - are you sure you want to log time?
              <button class="close" type="button" data-dismiss="alert"><span aria-hidden="true">×</span></button>
            </div>

            <div class="form-group hidden work_log_day"><input class="form-control hidden" type="hidden" value="2019-03-23" name="work_log[day]" id="work_log_day"></div>
            <div class="form-group select required work_log_project_assignment_id"><label class="form-control-label select required" for="work_log_project_assignment_id">Project assignment <abbr title="required">*</abbr></label>
              <select class="form-control select required" name="work_log[project_assignment_id]" id="work_log_project_assignment_id">
                <option value="101">QA Football Inception</option>
                <option value="103">QA Soccer Delivery</option>
                <option value="76">QA Hoodies</option>
              </select>
            </div>
            <div class="form-group string required">
              <label class="form-control-label string required" for="work_log_time_worked">
                                Time worked
                                <abbr title="required">*</abbr>
                            </label>
              <div class="time-worked-wrapper">
                <div class="form-group string required work_log_time_worked"><input class="form-control string required" data-formatter="hours_count_formatter" placeholder="0:00" type="text" name="work_log[time_worked]" id="work_log_time_worked"><small class="form-text text-muted">Allowed time entries in intervals of 15 minutes</small></div>
              </div>
            </div>
            <div class="form-group text required work_log_description"><label class="form-control-label text required" for="work_log_description">Description <abbr title="required">*</abbr></label><textarea class="form-control text required" name="work_log[description]" id="work_log_description"></textarea></div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-outline-secondary" data-dismiss="modal" type="button">
                            Cancel
                        </button>
            <input type="submit" name="commit" value="Create" class="btn btn-primary" data-disable-with="Create">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题