模式内的href链接无法正常工作 [英] href link inside modal is not working

问题描述

我的网页上有一个使用Bootstrap的模态.我在其中添加了带有href链接的锚标记.当我尝试单击该锚点元素时，它是不可单击的.锚标记在Modal中不起作用.

I have a Modal in my webpage which uses Bootstrap. I've added anchor tags in it to which there are href links. When I am trying to click on that anchor element, it is not clickable. Anchor tag is not working in Modal.

请帮助我解决这个问题.

Please help me with this issue.

请找到以下代码-

<div class="portfolio-modal modal fade" id="editionsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="col-sm-3">
                        <a href="hingoli.html" data-target="#" style="text-decoration: none;">
                            <div style="padding:15px; color:#181818; text-align: center; ">
                                <h4>Hingoli</h4>
                            </div>
                            <img src="pages/hingoli/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
                        </a>

                    </div>
                    <div class="col-sm-3">
                        <a href="parbhani.html" class="portfolio-link" style="text-decoration: none;">
                            <div style="padding:15px; color:#181818; text-align: center; ">
                                <h4>Parbhani</h4>
                            </div>
                            <img src="pages/parbhani/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
                        </a>

                    </div>
                    <div class="modal-body">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

推荐答案

请尝试以下代码！

$('#editionsModal .container a').on('click',function( ev){
  var $button=$(ev.target);
  ev.preventDefault();
  $(this).closest('.modal').on('hidden.bs.modal',function(e){
    var $href=$button.attr('href');
    window.location.href=$href;
    });
});

这篇关于模式内的href链接无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！