Okienko modal nie chce się zamknąć

pytanie zadane 16 kwietnia 2016 w JavaScript przez Wiiiciu Obywatel (1,110 p.)
edycja 16 kwietnia 2016 przez Wiiiciu

Witam, mam problem z okienkiem modal, otóż otwiera się wszystko ładnie (ikonka numer 3 - duszek) a po otwarciu nie chce się zamknąć, jest ono zmodyfikowane i powinno się zamknąć kliknięciem w obojętnie jakie miejsce.

DEMO: http://qwiiiciuerty.hol.es

proszę o pomoc.

<html>
	<head>
		<title>Identity by HTML5 UP</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!--[if lte IE 8]><script src="assets/js/html5shiv.js"></script><![endif]-->
		<link rel="stylesheet" href="assets/css/main.css" />
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        
		
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	</head>
	<body class="is-loading">

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Main -->
					<section id="main">
						<header>
							<span class="avatar"><img src="images/avatar.jpg" alt="" /></span>
							<h1>Test</h1>
							<p>Instagram | Blog | Snapchat <br></p>
						</header>
						
						<footer>
							<ul class="icons">
								<li><a href="#" class="fa-instagram">Instagram</a></li>
								<li><a href="#" class="fa-wordpress">Blog</a></li>
								<li><a data-toggle="modal" data-target="#myModal" href="#" class="fa-snapchat-ghost">Snapchat</a></li>
							</ul>
						</footer>
					</section>

                
            
                <div class="modal fade" id="myModal">
                    <div class="modal-dialog">
                            <div class="modal-body">
                                <center><img src="images/avatar.jpg"></center>
                            </div>
                    </div>
                </div>
                
                
                
                
				<!-- Footer -->
					<footer id="footer">
						<ul class="copyright">
							<li>&copy; Test</li>
							<li>Snapchat: <a>#</a></li>
						</ul>
					</footer>

			</div>
        
			<script>
				if ('addEventListener' in window) {
					window.addEventListener('load', function() { document.body.className = document.body.className.replace(/\bis-loading\b/, ''); });
					document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
				}
			</script>

	</body>
</html>

2 odpowiedzi

odpowiedź 16 kwietnia 2016 przez niezalogowany
wybrane 16 kwietnia 2016 przez Wiiiciu

Najlepsza

Żeś namieszał... tło które pojawia się przy włączeniu modal, zasłania wszystko, a klikając na tło - nic się nie dzieje. Dlaczego zasłania?

main.css 837
```
#wrapper > * {
     z-index: 1; 
}
```
To wywal (Swoją drogą niezbyt dobre rozwiązanie.. ciężko później debugować)

main.css 810

#wrapper {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-perspective: 1000px;
    -webkit-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
    position: relative;
    min-height: 100%;
    padding: 1.5em;
    z-index: 2;
}

Wywal wszystkie rzeczy z perspektywą (4) i z-index z samego dołu.

Inna sprawa że modal powinno być na końcu body - i nie miałbyś żadnego problemu.

komentarz 16 kwietnia 2016 przez Wiiiciu Obywatel (1,110 p.)

a tak bardziej po ludzku, co mam zrobić? :/

komentarz 16 kwietnia 2016 przez niezalogowany

To:

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
            <div class="modal-body">
                <center><img src="images/avatar.jpg"></center>
            </div>
    </div>
</div>

Umieść przed końcem </body> (tam masz jeszcze skrypt na końcu.. to bezpośrednio przed tym skryptem)