模态内的href链接不起作用答案

【问题标题】：href link inside modal is not working模态内的href链接不起作用
【发布时间】：2017-01-20 16:28:26
【问题描述】：

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

请帮我解决这个问题。

请在下面找到代码-

<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>

【问题讨论】：

从锚标签中删除 data-target="#"。
从锚标签中删除 data-target="#" 后仍无法正常工作
确保您调用的那些文件在同一个文件夹中。请检查结构。
在<div class="row"> 中添加了modal-body 类以使其成为<div class="row modal-body"> 并且它起作用了。无论如何，谢谢大佬。问题解决了:)

标签： html css href bootstrap-modal

【解决方案1】：

试试这个 $("#yourModalID table tbody").on('click','.yourBtnClass', function(){ //do something here })

【讨论】：

【解决方案2】：

请试试这个代码！

$('#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;
    });
});

【讨论】：

根据 cmets，看来 OP 已经通过将 modal-body 类添加到他们的 row 容器中找到了一个更简单的答案。

【解决方案3】：

我在使用 Bootstrap 4 时也有同样的行为，结果发现 .modal-dialog div 有一个禁用链接的 pointer-events: none; 属性。设置为 pointer-events: all; 为我修复了它。

【讨论】：

【解决方案4】：

检查一下，我使用了 clearfix div。但如果我不想要 clearfix，那么我使用 (div class="modal-body col-sm-3") 因为链接 div 有一个浮点值但modal-body 没有。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#editionsModal">Open Modal</button>
<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="clearfix"></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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

【讨论】：