繁体   English   中英

带有“上一个”按钮的引导模态到 go 返回模态中的页面?

[英]Bootstrap modal with "Previous" button to go back a page within modal?

我正在构建一个在模态内部具有导航选项卡的模态,其中这些导航选项卡实际上会将您带到相同的模态,只是显示不同的数据。 因此,当单击导航选项卡中的项目时,当前模式只会被新数据覆盖。

我真的希望能够在我的模态底部添加一个“上一个模态”按钮,以将用户重定向回他们之前所在的上一个模态 state。 我想知道是否有一种方法来操作 DOM,以存储以前 state 的模态,并在单击“上一个模态”按钮时返回该数据。

这是 function,每次“打开模式”单击都会调用它。

function openModal(url_link) {

    // Get correct URL
    link = url_link.data("link-url");

    $("#myModal .modal-content-area").hide();

    // Open modal
    $('#myModal').modal('show');

    // Get URL's data
    $.get("customurlhere.com", function( data ) {

        // Load new data each time modal is clicked
        $("#myModal .modal-content-area").html(data);


        $("#myModal .modal-link").on( "click", function() {
            openModal($(this));
        });



        //  show content
        $("#myModal .modal-content-area").show();

    });

}

// Open links within modal
$(".modal-link").on( "click", function() {
    myModal($(this));
});

模态所在的位置,以及数据被注入的位置。

    <div class="modal fade"role="dialog" id="modal">
      <div class="modal-dialog">
        <div class="modal-content"></div>
      </div>
    </div>
    <div class="modal fade" id="myModal" role="dialog" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ title }}</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <div class="modal-content-area"></div>
                    <div class="modal-footer">
                         <button class="btn btn-primary" type="button" data dismiss="modal">Close</button>
                         <button>*** Previous Modal Button would go here ****</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

我一直在敲我的头好几次。 什么都有帮助!

暂无
暂无

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

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