Modal in PHP mit PHP include

Ich versuche, modal in PHP mit der Include-Funktion zu verwenden, aber es gibt einen Fehler mit der Datei header.php ich denke. HierModal in PHP mit PHP include

ist der Code für den Modal:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <?php include 'header.php'; ?> 
</head> 
<body> 
<button id="myBtn">Open Modal</button> 
<div id="myModal" class="modal"> 
    <div class="modal-content"> 
    <span class="close">x</span> 
    <p>Some text in the Modal..</p> 
    </div> 

</div> 
</body> 
</html>

Dies ist, was in der header.php Datei ist:

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" /> 
<script type="text/javascript" src="file.js"></script>

EDIT:

Der Fehler ist die CSS-Datei und js-Datei kann nicht verarbeiten. Aber wenn ich das tue, es funktioniert:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
<style type="text/css"> 
    /* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Sit on top */ 
    left: 0; 
    top: 0; 
    width: 100%; /* Full width */ 
    height: 100%; /* Full height */ 
    overflow: auto; /* Enable scroll if needed */ 
    background-color: rgb(0,0,0); /* Fallback color */ 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content/Box */ 
.modal-content { 
    background-color: #fefefe; 
    margin: 15% auto; /* 15% from the top and centered */ 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; /* Could be more or less, depending on screen size */ 
} 

/* The Close Button */ 
.close { 
    color: #aaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    color: black; 
    text-decoration: none; 
    cursor: pointer; 
} 
</style> 
</head> 
<body> 
<button id="myBtn">Open Modal</button> 
<div id="myModal" class="modal"> 
    <div class="modal-content"> 
    <span class="close">x</span> 
    <p>Some text in the Modal..</p> 
    </div> 

</div> 
</body> 
</html> 
<script type="text/javascript"> 
// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 

</script>

Quelle

2016-05-30 Adi

Was ist der Fehler? – Darren

@Darren die CSS-Datei und Js-Datei funktioniert jetzt. es kann die Dateien nicht lesen – Adi

Sie haben nicht viel Code geliefert ... überhaupt, aber gerade von der Fledermaus, Ihre Modal nicht öffnen, weil Sie keine Trigger festgelegt haben auf Ihrem <button>. Ändern Sie ihn auf:

<button id="myBtn" data-toggle="modal" data-target="#myModal">Open Modal</button>

Beste auf Bootstrap Modals zu lesen, zu verstehen, wie man sie auslösen müssen.

Wenn Ihre Dateien nicht ordnungsgemäß von dem externen CDN enthalten werden, überprüfen Sie die Entwickler-Konsole für Fehler gezeigt werden/Dateien von Laden verhindert werden.

Quelle

2016-05-30 02:41:24 Darren

Kannst du bitte meinen bearbeiteten Beitrag überprüfen? weil, wenn ich nicht include'header.php verwende es funktioniert – Adi

@Adi in Ordnung - welches Dateiformat ist das modale? Wenn es '.html' ist, wird es nicht funktionieren. Es muss '.php' sein. Probieren Sie es auch und überprüfen Sie die Konsole, von dort können Sie Fehler melden, wenn es – Darren

in der PHP-Datei gibt – Adi

Modal in PHP mit PHP include

Antwort

Verwandte Themen