2
J'ai des problèmes avec Modal il ne se comporte pas comme il le devrait dans Bootstrap le contenu est visible une fois que le modèle est lancé au milieu de l'écran. Les cercles bloquent le texte visible.Overlay contenu modal Bootstrap sur modal
Exemple:
Je suis en train de retirer les cercles de l'écran une fois que le modal est lancé pour que le texte soit visible sur le modal. Cependant, les cercles doivent rester une fois que le modal est fermé ou que la page est chargée pour la première fois.
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 je vois que j'ai dû manquer celui-là merci beaucoup beaucoup :) –
aucun 'z-index' n'est nécessaire. ne pas jouer avec quand vous n'avez pas besoin de – Moher
@Moher vous avez raison, cela fonctionne * sans * 'z-index' trop ... Je mentionnais à ce sujet qu'il n'y a pas besoin de telles valeurs élevées :) – kukkuz