Search code examples
jqueryhtmltwitter-bootstrapiframeconflict

Bootstrap modal in iframe

I have a page with iframe on it and where jquery.js and bootstrap.js are loaded before the body tag. 

<html>
<head></head>
<body>
<iframe src="test.html"></iframe>
<script src="/assets/8bf00db7/jquery.js"></script>
<script src="/assets/383389f4/js/bootstrap.js"></script>
</body>
</html>

In test.html scripts are loaded in the same way. 

<html>
<head></head>
<body>
<button>Click</button>
<div class="modal">Model content here</div>
<script src="/assets/8bf00db7/jquery.js"></script>
<script src="/assets/383389f4/js/bootstrap.js"></script>
<script src="/js/main.js"></script>
</body>
</html>

There is also main.js file with this code. 

$(function() {
    $('button').click(function() {
        $('.modal').modal('show');
    });
});

When I click, I get an error: Uncaught TypeError: $(...).modal is not a function. Please help to fix it.

Solution

  • Imports must be done in the header tag:

    <html>
<head>

<script src="/assets/8bf00db7/jquery.js"></script>
<script src="/assets/383389f4/js/bootstrap.js"></script>
<script src="/js/main.js"></script>

</head>
<body>
<button>Click</button>
<div class="modal">Model content here</div>

</body>
</html>

    simple working example of bootstrap modal: http://jsfiddle.net/h3WDq/