是否有一种方法可以在新选项卡打开之前首先打开引导模式?

时间:2015-11-06 04:48:27

标签: jquery twitter-bootstrap

下面的代码将在引导模式出现之前首先打开新选项卡。是否有一种方法可以在新选项卡之前首先打开引导模式?

$(document).on("click", ".listings", function() {
     var id =  $(this).attr("id");

     $.ajax({
        url: "http://api.myjson.com/bins/2sadq?pretty=1",
        dataType: "json",
        success: function(response) {

            var modal = "<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title' id='myModalLabel'>Aloha!</h4></div><div class='modal-body'>Apartment address through Google Maps. Epic! Right?</div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button></div></div></div></div>";
            $('#myModal').modal('show');
            $(".modals").append(modal);

            var selectedApartment = $.grep(response.apartments, function(apartment) {
                return apartment.id == id;
            });

            var address = selectedApartment[0].address;

            window.open("http://maps.google.com/?q=" + address);
        },

        error: function(error) {
            console.log(error);
        }

    });
});

另外,如果你想查看完整的项目文件,这里是dropbox链接。

Full project file dropbox link

1 个答案:

答案 0 :(得分:0)

您还可以使用setTimeout来延迟打开弹出窗口:

setTimeout(function() {window.open("http://maps.google.com/?q=" + address)}, 1000);

更新:如果您希望在单击关闭按钮后出现弹出窗口:

success: function(response) {

                var modal = "<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button><h4 class='modal-title' id='myModalLabel'>Aloha!</h4></div><div class='modal-body'>Apartment address through Google Maps. Epic! Right?</div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button></div></div></div></div>";

                $(".modals").html(modal);

                var selectedApartment = $.grep(response.apartments, function(apartment) {
                    return apartment.id == id;
                });

                var address = selectedApartment[0].address;

                $('#myModal').on('hide.bs.modal', function (e) {
                    window.open("http://maps.google.com/?q=" + address);
                });
                $('#myModal').modal('show');
            },