2017-07-07 12 views
1

Ich habe eine Seite mit iframe darauf und wo jquery.js und bootstrap.js sind vor dem Body-Tag geladen.Bootstrap modal in iframe

<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 Skripte sind in der gleichen Art und Weise geladen.

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

Es gibt auch main.js Datei mit diesem Code.

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

Wenn ich auf, bekomme ich einen Fehler: Uncaught Typeerror:. $ (...) modal keine Funktion ist. Bitte helfen Sie es zu beheben.

+0

in Ihrem test.html, alle Skripte in '' Tag bewegen – tech2017

Antwort

0

Imports muss im Header-Tag erfolgen:

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

einfache Arbeitsbeispiel für Bootstrap-modal: http://jsfiddle.net/h3WDq/