Question

I have a problem unbinding the modal event from an 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>

When the link is clicked for the first time, the modal opens and the link behind the button is rewritten via

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

Well, if the user clicks the button again, the modal must not be shown to the user, but redirected to http:/ /www.some.static/site.html.

I tried this to solve the problem:

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

Unfortunately, it doesn't work and the modal appears again and again...

I would be glad for some hints. Thx :)

Was it helpful?

Solution

Use jQuery and remove the attribute data-toggle

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

If you want all the html code, here it is:

<!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>
  1. Jsfiddle code
  2. Jsfiddle result

Note that jsfiddle blocks the redirection to another website, that's why i added the entire html here so you can copy paste into your file and make it work without any modification.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top