Hallo,
ich habe versucht folgendes script von fiddle (https://jsfiddle.net/ntLpg6hw/11/) zu verwenden. Habe dazu die bootstrap und jquery scripts eingefügt.
Habe auch gefunden, dass ich das jquery script zuerst einfügen sollte. Dennnoch kommt der Fehler: Uncaught ReferenceError: $ is not defined
Anbei das script:
<link rel="stylesheet" href="jquery-ui.min.js">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.min.js">
<style>
#myModal {
position: relative;
}
.modal-dialog {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
}
</style>
<html>
<button id="btn1">Show Modal</button>
<br />
<button onclick="alert('Button Clicked')">Another Button</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Title</h4>
</div>
<div class="modal-body">
Modal Body
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</html>
<script>
$('#btn1').click(function() {
// reset modal if it isn't visible
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 0,
left: 0
});
}
$('#myModal').modal({
backdrop: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
</script>
Vielen Dank