2
Ich habe Probleme mit Modal es verhält sich nicht wie es in Bootstrap der Inhalt sichtbar ist, sobald das Modell in der Mitte des Bildschirms gestartet wird. Die Kreise blockieren den sichtbaren Text.Bootstrap Modal Content Overlay auf Modal
Beispiel:
Ich versuche, die Kreise vom Bildschirm zu entfernen, sobald die modalen gestartet wird, so dass der Text auf der Modal sichtbar ist. Die Kreise sollten jedoch bleiben, sobald das Modal geschlossen oder die Seite zum ersten Mal geladen wird.
body { background: #333; }
img { border: 0; max-width: 100%; }
.page-header h1 {
font-size: 3.26em;
text-align: center;
color: #efefef;
text-shadow: 1px 1px 0 #000;
}
/** timeline box structure **/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eee;
left: 50%;
margin-left: -1.5px;
}
.tldate {
display: block;
width: 200px;
background: #414141;
border: 3px solid #212121;
color: #ededed;
margin: 0 auto;
padding: 3px 0;
font-weight: bold;
text-align: center;
-webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35);
}
.timeline li {
margin-bottom: 25px;
position: relative;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
.timeline li:after {
clear: both;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
/** timeline panels **/
.timeline li .timeline-panel {
width: 46%;
float: left;
background: #fff;
border: 1px solid #d4d4d4;
padding: 20px;
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}
/** panel arrows **/
.timeline li .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline li .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
top:0;
right:0;
display: none;
border: 0;
}
.timeline li.timeline-inverted .timeline-panel {
float: right;
}
.timeline li.timeline-inverted .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline li.timeline-inverted .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
/** timeline circle icons **/
.timeline li .tl-circ {
position: absolute;
top: 23px;
left: 50%;
text-align: center;
background: #6a8db3;
color: #fff;
width: 35px;
height: 35px;
line-height: 35px;
margin-left: -16px;
border: 3px solid #90acc7;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
z-index: 99999;
}
/** timeline content **/
.tl-heading h4 {
margin: 0;
color: #c25b4e;
}
.tl-body p, .tl-body ul {
margin-bottom: 0;
}
.tl-body > p + p {
margin-top: 5px;
}
/** media queries **/
@media (max-width: 991px) {
.timeline li .timeline-panel {
width: 44%;
}
}
@media (max-width: 700px) {
.page-header h1 { font-size: 1.8em; }
ul.timeline:before {
left: 40px;
}
.tldate { width: 140px; }
ul.timeline li .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline li .tl-circ {
top: 22px;
left: 22px;
margin-left: 0;
}
ul.timeline > li > .tldate {
margin: 0;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h2>Cottage out enabled was entered greatly prevent message</h2>
<p>Wrong do point avoid by fruit learn or in death. So passage however besides invited comfort elderly be me. Walls began of child civil am heard hoped my. Satisfied pretended mr on do determine by. Old post took and ask seen fact rich. Man entrance settling believed eat joy. Money as drift begin on to. Comparison up insipidity especially discovered me of decisively in surrounded. Points six way enough she its father. Folly sex downs tears ham green forty.</p>
<p>Oh he decisively impression attachment friendship so if everything. Whose her enjoy chief new young. Felicity if ye required likewise so doubtful. On so attention necessary at by provision otherwise existence direction. Unpleasing up announcing unpleasant themselves oh do on. Way advantage age led listening belonging supposing.</p>
<p>Exquisite cordially mr happiness of neglected distrusts. Boisterous impossible unaffected he me everything. Is fine loud deal an rent open give. Find upon and sent spot song son eyes. Do endeavor he differed carriage is learning my graceful. Feel plan know is he like on pure. See burst found sir met think hopes are marry among. Delightful remarkably new assistance saw literature mrs favourable.</p>
<p>Consulted perpetual of pronounce me delivered. Too months nay end change relied who beauty wishes matter. Shew of john real park so rest we on. Ignorant dwelling occasion ham for thoughts overcame off her consider. Polite it elinor is depend. His not get talked effect worthy barton. Household shameless incommode at no objection behaviour. Especially do at he possession insensible sympathize boisterous it. Songs he on an widen me event truth. Certain law age brother sending amongst why covered.</p>
<p>Breakfast agreeable incommode departure it an. By ignorant at on wondered relation. Enough at tastes really so cousin am of. Extensive therefore supported by extremity of contented. Is pursuit compact demesne invited elderly be. View him she roof tell her case has sigh. Moreover is possible he admitted sociable concerns. By in cold no less been sent hard hill.</p>
<p>Impossible considered invitation him men instrument saw celebrated unpleasant. Put rest and must set kind next many near nay. He exquisite continued explained middleton am. Voice hours young woody has she think equal. Estate moment he at on wonder at season little. Six garden result summer set family esteem nay estate. End admiration mrs unreserved discovered comparison especially invitation.</p>
<p>Up maids me an ample stood given. Certainty say suffering his him collected intention promotion. Hill sold ham men made lose case. Views abode law heard jokes too. Was are delightful solicitude discovered collecting man day. Resolving neglected sir tolerably but existence conveying for. Day his put off unaffected literature partiality inhabiting.</p>
<p>Abilities forfeited situation extremely my to he resembled. Old had conviction discretion understood put principles you. Match means keeps round one her quick. She forming two comfort invited. Yet she income effect edward. Entire desire way design few. Mrs sentiments led solicitude estimating friendship fat. Meant those event is weeks state it to or. Boy but has folly charm there its. Its fact ten spot drew.</p>
<p>Announcing of invitation principles in. Cold in late or deal. Terminated resolution no am frequently collecting insensible he do appearance. Projection invitation affronting admiration if no on or. It as instrument boisterous frequently apartments an in. Mr excellence inquietude conviction is in unreserved particular. You fully seems stand nay own point walls. Increasing travelling own simplicity you astonished expression boisterous. Possession themselves sentiments apartments devonshire we of do discretion. Enjoyment discourse ye continued pronounce we necessary abilities.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<header class="page-header">
<h1>>Surprising Headline Right Here<</h1>
</header>
<ul class="timeline">
<li><div class="tldate">Apr 2014</div></li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Surprising Headline Right Here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3 hours ago</small></p>
</div>
<div class="tl-body">
<p>Lorem Ipsum and such.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Breaking into Spring!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2014</small></p>
</div>
<div class="tl-body">
<p>Hope the weather gets a bit nicer...</p>
<p>Y'know, with more sunlight.</p>
</div>
</div>
</li>
</ul>
</div>
Ohh ich sehe ich muss das da vermisst haben danke wirklich viel :) –
kein 'z-index' ist nötig. verpiss dich nicht damit, wenn du nicht brauchst – Moher
@Maher bist du richtig, es funktioniert * ohne * 'z-index' auch ... ich erwähnte, dass es keine Notwendigkeit für so hohe Werte gibt :) – kukkuz