您好我遇到与此主题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">×</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>
答案 0 :(得分:0)
这样的东西就足够了。
注意:我假设你正在为你的项目使用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");
})
})
&#13;
<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">×</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 -->
&#13;