Dankjulliewel voor jullie reactie. De backdrop optie heeft volgens mij alleen betrekking tot het wel of niet laten sluiten van de modal bij erop klikken.
In deze Fiddle werkt het naar behoren. Als ik dezelfde code echter op de pagina inbouw, gaat het mis en komt de modal achter de backdrop terecht. Ik heb alle andere componenten al eruit gehaald, behalve een standaard menubalk van Bootstrap. Ik laad de originele bootstrap.css in en de nieuwste jquery versie.
Mijn vraag is dus, heeft iemand deze problemen ook gehad en wat kan de oorzaak zijn? Is er een interactie met de menubalk?
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>{{@WEBSITE_TITLE}} - Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="modal fade" id="photoPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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 class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="/images/logo_white.png" height="20px" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Dashboard</a></li>
<li><a href="/info">Information</a></li>
<li><a data-toggle="modal" data-target="#photoPopup">Test</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/account">My account</a></li>
<li><a href="/progress">Progress</a></li>
<li class="divider"></li>
{{@ADMIN_PANEL_LINK}}
<li><a href="/logout">Log off</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1>Welcome {{@PARTICIPANT_NAME}}!</h1>
<div class="row">
<div class="col-md-5">
<p>Welcome on <i>e-learning</i> website!</p>
</div>
</div>
<!--<p><a class="btn btn-info btn-lg" href="{{@URL_NEXT_MODULE}}" role="button">Start/continue available module »</a></p>-->
<p><a class="btn btn-info btn-lg" href="/info" role="button">Read more about our project »</a></p>
</div>
<div class="row">
{{@MODULES}}
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">© 2015 {{@COMP_NAME}}</p>
</div>
</footer>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html> |
[
Voor 78% gewijzigd door
Rogie25 op 09-04-2015 09:07
]
:strip_icc():strip_exif()/u/408989/crop5613f0d80e7bb_cropped.jpeg?f=community)
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
Ik zie net dat:
:strip_icc():strip_exif()/u/311489/avatar.jpg?f=community){kind=avatar}