0
プレビューボタンのポップアップを追加する必要があります。ユーザーがプレビューボタンをクリックすると、フォームの確認と詳細のポップアップが表示されます。フィールドが空白の場合は、必須フィールドが表示され、ユーザーが一度入力するとすべての詳細が表示されます。私のコードでは、ユーザがプレビューボタンをクリックしたときにポップアップと必要な両方が一緒に機能します。PHPでフォームの詳細をプレビューで確認する
ここにコードがあります。
<form method="post" align="center" action="">
<div class="login">
<div class="login-form">
<h3>Title:</h3>
<input type="text" name="title" required="required" /><br />
<h3>Image:</h3>
<input type="text" name="image" required="required"/>
<br />
<h3>Date:</h3>
<input type="text" id="filter-date" name="date" required="required"/>
<br />
<h3>Description:</h3>
<textarea rows="2" cols="40" name="description" type="text" required="required">
</textarea>
<br />
<button id="myBtn">Open Modal</button>
</div>
</div>
</form>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// 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 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>
</div>
</div>
</body>
</html>
。あなたはPHPに精通していますか？ – BlueSuiter
はい私はPHPを知っています。あまり面白くないです。 – user6582683
Open Modalはプレビューボタンとして使用されていますか？ – BlueSuiter