繁体   English   中英

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

[英]Bootstrap modal doesn't toggle on first click

嗨,我遇到了同样的问题,因为此线程twitter bootstrap modal在第一次调用时将无法使用

我试图遵循答案并将$('#modal').modal('toggle')替换$('#modal').modal('toggle') $('#modal').modal('show') 它仍然仅在第二次单击时注册。 (您必须单击海报两次以显示模态,并且必须单击“选择”按钮两次以将其关闭)。

这是我的代码: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>

像这样的东西就足够了。

注意 :我假设您正在为项目使用引导程序4 ,尽管引导程序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 --> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM