Ik ben bezig met een pagina. Op het moment alleen html en css. Ik gebruik bootstrap voor het design en bootstrap heeft een modal die je op je website kan zetten. Het lukt me alleen niet om die modal werkend te krijgen. Ik ben hier niet erg ervaren/handig mee dus zou iemand met kunnen helpen met dit probleem en zou iemand me willen helpen met het structuren van de pagina, want dat gaat ook niet helemaal lekker en ik loop vast als ik het zelf wil proberen.
Hier onder staat de pagina
Fabian
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquerymodal.com/jquery.modal.js" type="text/javascript"></script>
<title>Lorm Ipsum dolor</title>
<style>
html{
overflow-y:scroll;
}
body {
margin:0;
padding:0;
font-size: 16px;
font-family: Open Sans, sans-serif;
color: #333333;
padding-bottom:70px;
}
.clear{
display:block;
clear:both;
}
.clear:after{
display:block;
visibility:hidden;
height:0;
clear:both;
font-size:0;
content:"";
}
#header, #container, #footer{
max-width:1250px;
margin:0 auto;
}
.navbar-right {
margin-top:10px;
}
a.bovenmenu {
color:#000;
background-color:#FFF;
margin-top:2px;
height:50px;
}
li.bovenmenu {
color:#000;
background-color:#FFF;
margin-top:2px;
height:50px;
}
li.bovenmenu:hover {
color:#27ae60;
background-color:#FFF;
}
a.bovenmenu:hover {
color:#27ae60;
}
ul h2 {
margin:0;
}
.row1 {
height:80px;
margin-bottom:10px;
color:#919191;
-webkit-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.75);
}
nav ul li a {
font-size: 20px;
color: #333;
}
.right {
float:right;
}
.modal {
}
</style>
</head>
<body>
<div class="row1">
<div class="clear" id="header">
<nav class="navbar">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="bovenmenu"><a href="#"><h2>Lorum Ipsum Dolor</h2></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="bovenmenu"><a href="#">Lorum</a></li>
<li class="bovenmenu"><a href="#">Ipsum</a> </li>
<li class="bovenmenu"><a href="#">Dolor</a> </li>
<li class="bovenmenu"><a href="#">Contact</a></li>
<form action="" class="navbar-form navbar-right" role="search" maxlength="20" method="post">
<div class="form-group">
<input type="text" class="form-control" placeholder="zoeken..." name="d" value="">
</div>
<button type="submit" class="btn btn-default">Zoeken</button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Lorum Ipsum dolor
<div class="right"><i class="fa fa-bookmark fa-rotate-90" aria-hidden="true"></i>
<i class="fa fa-bookmark fa-rotate-90" aria-hidden="true"></i></div>
</div>
<div class="panel-body">
Lorum ipsum dolor Lorum ipsum dolor Lorum ipsum dolor Lorum ipsum dolorLorum ipsum dolor Lorum ipsum dolorLorum ipsum dolor Lorum ipsum dolorLorum ipsum dolor Lorum ipsum dolor
Lorum ipsum dolor Lorum ipsum dolorLorum ipsum dolor Lorum ipsum dolorLorum ipsum dolor Lorum ipsum dolorLorum ipsum dolor Lorum ipsum dolor
</div>
<div class="panel-footer">
<i class="fa fa-star-o fa-lg" aria-hidden="true"></i>
<a href="#messages" rel="modal:open"><i class="fa fa-comment-o fa-lg" aria-hidden="true"></i></a>
<div class="modal fade" id="messages" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Lorum ipsum dolor</div>
<div class="modal-body">lorum ipsum dolor</div>
</div>
</div>
</div>
<a href="#" class="right"><i class="fa fa-angle-double-right fa-lg" aria-hidden="true"></i> Lees verder... </a>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</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 type="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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>