0
Ich habe versucht, meinen Code so anzupassen, dass das modale Popup in einem großen Wrapper ist, aber es passiert nicht so, wie ich es möchte.Bootstrap modal in einen div wrapper anstelle von body einfügen
Wie sieht es aus wie jetzt beim Laden der Seite - ein Popup mit einer Blur-Overlay
<section id="wrapper">
<div class="logo">
<a href="<?php echo $base_url; ?>index.php">
<img src="assets/images/logo.png" class="img img-responsive"/>
</a>
</div>
<div class="fat-nav">
<div class="fat-nav__wrapper">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Help</a></li>
<?php if(isset($_SESSION['login']) && $_SESSION['login'] == true) : ?>
<li><a href="<?php echo $base_url;?>logout.php">Logout</a></li>
<?php endif; ?>
</ul>
</div>
</div>
<div class="content">
<div class="container master-container">
<div class="back-top-right"></div>
<div class="square-container"></div><!-- /.square-container -->
<div class="back-bottom-left"></div>
<div class="clearfix"></div>
</div><!-- /.col-sm-12 -->
</div><!-- /.content -->
<div class="footer">
<img src="assets/images/24.png" />
COPYRIGHT 2017 SUNWAY GROUP
</div><!-- /.footer -->
<div class="clearfix"></div>
<div id="bx">
<div class="side-buttons">
<a href="#" class="btn btn-default text-uppercase">
<span class="changeMe">
<?php
echo count($user['Pledges']).'/'.$number_of_square;
?>
</span> <br />
<small>Pieces Revealed</small>
</a>
<a href="<?php echo $base_url; ?>pledge.php?new=1" class="btn btn-default text-uppercase">
Pledge
<img src="assets/images/23.png" height="20" style="margin-top: -2px;">
</a>
</div><!-- /.side-buttons -->
</div><!-- /#bx -->
</section><!-- /#wrapper -->
//////////MODAL below/////////
<!-- Modal -->
<div id="welcome" class="modal fade welcome" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center">
Unlock the Artwork with Your Words.
</h1>
<p class="text-center">
Select which tile of the artwork to unveil your pledge, and view pledges from others by browsing through the tiles.
</p>
</div>
<div class="modal-footer">
<div class="button-container">
<a href="<?php echo $base_url;?>pledge.php" class="btn btn-default text-uppercase">
Continue
<img src="assets/images/23.png" height="20" style="margin-top: -2px;">
</a>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dailog -->
</div><!-- /#welcome /.welcome-->
<!-- Modal -->
<div id="thePledge" class="modal fade thePledge" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="modal-close-button">
<button class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div><!-- /.modal-close-button -->
<div class="col-sm-12">
<div class="back-top-left"></div>
<span>
<?php
$fb_id = 0;
if(isset($_SESSION['fb_uid'])){
$fb_uid = $_SESSION['fb_uid'];
}
?>
<img src='
<?php echo ($fb_uid > 0) ? "https://graph.facebook.com/{$fb_uid}/picture?type=large" : "assets/images/12.png"; ?>
' style="max-width:129px;" class="user-img">
</span>
<span class="text-head">
<?php
$fb_first_name = $fb_last_name = '';
if(isset($_SESSION['first_name'])){
echo $_SESSION['first_name'] . ' ' .$_SESSION['last_name'];
}else{
echo 'UnKnown';
}
?>:
</span>
<br><br>
</div><!-- /.col-sm-12 -->
<div class="col-sm-12 ">
<p class="set-content">I pledge to be champion of clean air and help keep Sunway Pyramid smoke-free. I will also be respectful of the responsible smokers who smoke in the designted areas.</p>
</div><!-- /.col-sm-12 -->
</div><!-- /.modal-body -->
<div class="modal-footer">
<div class="back-bottom-right"></div>
<div class="button-container">
<div class="pull-right">
<a href="#" class="sharing ">
<img src="assets/images/26.png" />
</a>
<span class="group-social">
<a href="#" class="facebook animated">
<img src="assets/images/facebook.png" />
</a>
<a href="#" class="message animated">
<img src="assets/images/message.png" />
</a>
</span>
</div><!-- /.pull-right -->
<div class="clearfix"></div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dailog -->
</div><!-- /#thePledge /.thePledge-->
Ich versuchte, den oben modal Code in das #wrapper zu bewegen, aber dann die ganze Seite wird eine Unschärfe Overlay hat.
Ich habe mit dem CSS hantiert, aber ich kann nicht scheinen, es richtig zu machen.
Hier ist meine ganze CSS-Datei: https://plnkr.co/edit/DP2s6HRgFfrDiT7ws0Se?p=preview
Kann mir jemand helfen/eine Lösung für dieses vorschlagen? Ich inspizierte die Seite und "Modal-Open" -Klasse ist auf dem Body-Tag, wenn das Popup-modale in die Seite beim ersten Laden lädt
Versucht so, aber leider nicht funktioniert –