Question

我在解决ahref-element的模态事件时遇到问题：

<a id="mzlink_123" href="/merken/123.html" class="btn btn-info" data-toggle="modal" data-target="#myModal"><i class="icon-white glyphicon glyphicon-list-alt"></i> Merken</a>

首次点击链接时，模式会打开，按钮后面的链接会通过

重写

document.getElementById('mzlink_123').href = "http://www.some.static/site.html";

好吧，如果用户再次点击该按钮，则不得向用户显示该模式，而是重定向到http：/ /www.some.static/site.html。

我试过这个来解决问题：

$('#myModal').on('hide.bs.modal', function (e) {$('a#mzlink_123').unbind('bs.modal');});

不幸的是，它不起作用，模式一次又一次出现......

我会很高兴得到一些提示。谢谢：）

Answer 1

使用jQuery并删除属性data-toggle

$('#mzlink_123').attr("href", "http://www.some.static/site.html");
$('#mzlink_123').removeAttr( "data-toggle" );

如果你想要所有的html代码，请点击这里：

<!DOCTYPE html>
<html>
    <head>        
        <title>DEMO</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">      
    </head>
    <body id="home">
        <a id="mzlink_123" href="/merken/123.html" class="btn btn-info" data-toggle="modal" data-target="#myModal"><i class="icon-white glyphicon glyphicon-list-alt"></i> Merken</a>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div> 
                </div>
            </div>
        </div>                
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  
        <script type="text/javascript">
            var count = 0;

            $('#mzlink_123').on('click', function(){
                if (count == 1){
                    $('#mzlink_123').attr("href", "http://www.google.ro");
                    $('#mzlink_123').removeAttr( "data-toggle" );
                }
                count++;
            });
        </script>      
    </body>
</html>

Jsfiddle code
Jsfiddle result

请注意，jsfiddle会阻止重定向到另一个网站，这就是为什么我在这里添加了整个html，这样您就可以将粘贴复制到您的文件中，并使其无需任何修改即可使用。

第一次单击后，从链接中进行Undbind bootstrap 3模态调用

1 个答案: