Bootstrap 模态不会在第一次单击时切换

Question

你好，我和这个帖子twitter bootstrap modal won't work on first call有同样的问题

我尝试按照答案将$('#modal').modal('toggle') 替换为$('#modal').modal('show')。它仍然只在第二次点击时注册。 （您必须点击海报 2 次才能显示模态，并且您必须点击 2 次“选择”按钮才能关闭它）。

这是我的代码：Javascript

var zipcode = 92660;
var showDate = '2018-06-10';
var selectedMovieTitles = [];
var selectedMoviePosters = [];
var selectState = false;
var tmsURL = 'http://data.tmsapi.com/v1.1/movies/showings?startDate=' + showDate + '&zip=' + zipcode + '&api_key=' + tmsAPIKey;

$('#button').on('click', function () {
    getMovieList();
});

function litmitMovieSelect() {
    $('#limitSelection').modal('show');
}

function selectMovie() {
    $(this).on('click', function () {
        $('#movieInfoModal').modal('hide');
        if (selectedMovieTitles.length >= 3) {
            litmitMovieSelect();
        }
        else {
            selectState = true;
            selectedMovieTitles.push($(this).attr('data-title'));
            selectedMoviePosters.push($(this).attr('data-poster'));
            $(`.posters[data-title='${$(this).attr('data-title')}']`).css('border', '3px solid #008000');
            $(`.posters[data-title='${$(this).attr('data-title')}']`).attr('data-state-selected', selectState);
            console.log('selected movie titles: ' + selectedMovieTitles);
        }
    });
}

function launchModal() {
    $(this).on('click', function () {
        selectState = false;
        $(this).css('border', '');

        var titleToBeRemove = $(this).attr('data-title');
        if (selectedMovieTitles.indexOf(titleToBeRemove) !== -1) {
            selectedMovieTitles.splice(selectedMovieTitles.indexOf(titleToBeRemove), 1);
        }

        $('.modal-title').text($(this).attr('data-title'));
        var movieInfoDiv = $(`<div>
                                <p><strong>Actors:</strong> ${$(this).attr('data-actors')}</p>
                                <p><strong>Director:</strong> ${$(this).attr('data-director')}</p>
                                <p><strong>Genre:</strong> ${$(this).attr('data-genre')}</p>
                                <p><strong>Year:</strong> ${$(this).attr('data-year')}</p>
                                <p><strong>Duration:</strong> ${$(this).attr('data-runtime')}</p>
                                <p><strong>Rating:</strong> ${$(this).attr('data-rating')}</p>
                                <p><strong>Plot:</strong> ${$(this).attr('data-plot')}</p>
                            </div>`)
        $('.modal-body').html(movieInfoDiv);
        var selectButton = $(`  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" data-title="${$(this).attr('data-title')}" data-poster="${$(this).attr('data-poster')}">
                                    Select
                                </button>`)
        selectButton.on('click', selectMovie);
        $('#movieInfoModalFooter').html(selectButton);
        $('#movieInfoModal').modal('show');
    });
}

function getMovieList() {
    var movieTitles = [];
    axios.get(tmsURL)
        .then(function (tmsResp) {
            console.log(tmsResp);
            tmsResp.data.forEach(function (element) {
                movieTitles.push(element.title);
            });
            console.log(movieTitles);
            movieTitles.forEach(function (element) {
                var omdbURL = 'https://omdbapi.com/?t=' + element + '&apikey={}';

                axios.get(omdbURL)
                    .then(function (omdbResp) {
                        console.log(omdbResp);
                        var posterDiv = $(`<img class='posters m-3' id='${omdbResp.data.imdbID}' 
                                                data-title='${omdbResp.data.Title}'
                                                data-actors='${omdbResp.data.Actors}'
                                                data-director='${omdbResp.data.Director}'
                                                data-genre='${omdbResp.data.Genre}'
                                                data-plot='${omdbResp.data.Plot}'
                                                data-year='${omdbResp.data.Year}'
                                                data-runtime='${omdbResp.data.Runtime}'
                                                data-rating='${omdbResp.data.imdbRating}'
                                                data-poster='${omdbResp.data.Poster}'
                                                src=${omdbResp.data.Poster}
                                        >`);
                        posterDiv.on('click', launchModal);
                        $('#movie-display').append(posterDiv);
                    })
                    .catch(function (err) {
                        console.error(err);
                    });
            });
        }).catch(function (err) {
            console.error(err);
        });
}

这是 HTML：

<div class="modal fade" id="litmitSelection" tabindex="-1" role="dialog" aria-labelledby="litmitSelection" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                Sorry, You Can Only Select Up To 3 Movies.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Movie Info Modal -->
<div class="modal fade" id="movieInfoModal" tabindex="-1" role="dialog" aria-labelledby="movieInfoModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">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" id="movieInfoModalFooter">
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                <!-- <button type="button" class="btn btn-primary">Select</button> -->
            </div>
        </div>
    </div>
</div>

Answer 1

这样就足够了。

注意：我假设您正在为您的项目使用bootstrap 4，尽管 bootstrap 3 也可以，但只需稍微调整一下以满足您的需要

$(document).ready(function() {
  /**
   * for showing edit item popup
   */

  $(document).on('click', "#edit-item", function() {
    $(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.

    var options = {
      'backdrop': 'static'
    };
    $('#edit-modal').modal(options)
  })

  // on modal show
  $('#edit-modal').on('show.bs.modal', function() {
    var el = $(".edit-item-trigger-clicked"); // See how its usefull right here? 


    /*
    You now have a reference to which element caused the modal to showup , you can use this to do anything as shown below
    */

    var row = el.closest(".data-row");
    // get the data
    var id = el.data('item-id');
    var name = row.children(".name").text();
    var description = row.children(".description").text();

    // fill the data in the input fields
    $("#modal-input-id").val(id);
    $("#modal-input-name").val(name);
    $("#modal-input-description").val(description);

  })

  // on modal hide
  $('#edit-modal').on('hide.bs.modal', function() {
    $('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
    $("#edit-form").trigger("reset");
  })
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<div class="main-container container-fluid">
  <!-- heading -->
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <h1 class="text-primary mr-auto">Example list</h1>
      </div>
    </div>
  </div>
  <!-- /heading -->
  <!-- table -->
  <table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
    <thead class="thead-dark">
      <tr>
        <th>#</th>
        <th> Name</th>
        <th> Description</th>
        <th> Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="data-row">
        <td class="align-middle iteration">1</td>
        <td class="align-middle name">Name 1</td>
        <td class="align-middle word-break description">Description 1</td>
        <td class="align-middle">
          <button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="attachment-body-content">
        <form id="edit-form" class="form-horizontal" method="POST" action="">
          <div class="card text-white bg-dark mb-0">
            <div class="card-header">
              <h2 class="m-0">Edit</h2>
            </div>
            <div class="card-body">
              <!-- id -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
                <input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
              </div>
              <!-- /id -->
              <!-- name -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-name">Name</label>
                <input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
              </div>
              <!-- /name -->
              <!-- description -->
              <div class="form-group">
                <label class="col-form-label" for="modal-input-description">Email</label>
                <input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
              </div>
              <!-- /description -->
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- /Attachment Modal -->