当从菜单中选择链接时，在引导模式中转到正确的链接 - Go to correct link in bootstrap modal when link is selected from menu

Go to correct link in bootstrap modal when link is selected from menu

本文关键字：链接模式菜单选择 | 更新日期: 2023-09-27

我有一个这样的菜单:

<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">Dashboard</a></li>
<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">Tools</a></li>
<li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">Billing</a></li>

当我打开模态时，它看起来像这样:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" 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 text-center">My Listings</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 no-padding-xs">
                        @foreach( Auth::user()->listings as $listing )
                            <a href="{{ ( Go to the correct link based on the menu selected) }}">
                            <h1>{{ $listing->name }}</h1>
                            </a>  
                        @endforeach
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

如果用户点击"Tools"链接，它会自动替换或附加/Tools在

例如，如果他们从菜单中选择了dashboard，我希望链接是href="/listing/{{$listing->slug}}/dashboard"在模态中一个href

这将不得不在JS中完成。为每个锚标记添加一个data-url，并为每个锚标记添加一个公共类:

<li><a href="" data-url="/dashboard" class="link-to-modal" data-toggle="modal" data-target=".bs-example-modal-lg">Dashboard</a></li>
<li><a href="" data-url="/tools" class="link-to-modal" data-toggle="modal" data-target=".bs-example-modal-lg">Tools</a></li>
<li><a href="" data-url="/billing" class="link-to-modal" data-toggle="modal" data-target=".bs-example-modal-lg">Billing</a></li>

还需要在模态中的锚标记中添加一个公共类，并设置url的开头:

<div class="col-md-12 no-padding-xs">
     @foreach( Auth::user()->listings as $listing )
          <a href="/listing/{{ $listing->slug }}" class="url-on-modal" >
              <h1>{{ $listing->name }}</h1>
          </a>  
     @endforeach
</div>

在你的js文件中，使用jquery你需要监听onclick事件:

$("a.link-to-modal").on('click', function(e){ // cliking on the menu
    e.preventDefault();
    var _this = $(this);
    var _url  = _this.data('url'); // getting the url from the anchor tag either /dashboard /tools /billing
    $('a.url-on-modal').each(function(i, obj) {
        var original_url = $(this).attr("href"); // getting url
        var new_url      = original_url+_url;    // concatenating both url /listing/slug/dashboard
        $(this).attr("href", new_url); // updating href
    });
});