Модальные в PHP с php включают

Я пытаюсь использовать modal в PHP с функцией include, но есть ошибка с файлом header.php, я думаю.Модальные в PHP с php включают

Вот код для модального:

<!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>

Это то, что находится внутри файла header.php:

<!-- 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:

Ошибка файла CSS и js file can not process. Но когда я это делаю, это работает:

<!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>

источник

2016-05-30 Adi

Какая ошибка? – Darren

@ Даррен файл css и файл js теперь работают. он не может читать файлы – Adi

Вы не предоставили много кода ... вообще, но прямо от летучей мыши, ваш модальный не будет открыты, потому что вы не указали никаких триггеров на вашем <button>. Измените его на:

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

Лучше читать на Bootstrap Modals, чтобы понять, как вам нужно, чтобы вызвать их.

Если ваши файлы не будут должным образом включены от внешнего CDN, проверьте консоль разработчика за любые ошибки показываются/файлы, с которыми предотвращается загрузка.

источник

2016-05-30 02:41:24 Darren

Можете ли вы проверить мой отредактированный пост? потому что, когда я не использую include'header.php, он работает – Adi

@Adi в порядке - какой формат файла является модальным? Если это '.html', это не сработает. Это должно быть '.php'. Кроме того, попробуйте это и проверьте консоль, оттуда вы можете публиковать ошибки, если есть – Darren

, она находится в файле php – Adi

Модальные в PHP с php включают

ответ

Смежные вопросы