i have a problem with the modal that won't show up.
here's the code of my index.blade.php of my modal.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reportModal">
here's my modal in index.blade.php, i can't put all of my modal code in this because it isn't allowed.
<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tambah Data Siswa</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
and here's my tag in master.blade.php
<body>
<!-- WRAPPER -->
<div id="wrapper">
<!-- NAVBAR -->
#include('layouts.includes._navbar')
<!-- END NAVBAR -->
<!-- LEFT SIDEBAR -->
#include('layouts.includes._sidebar')
<!-- END LEFT SIDEBAR -->
<!-- MAIN -->
#yield('content')
<!-- END MAIN -->
<div class="clearfix"></div>
<footer>
<div class="container-fluid">
<p class="copyright">© 2017 Theme I Need. All Rights Reserved.</p>
</div>
</footer>
</div>
if you guys wanted more of my code, i can post it more in comments, any help will be appreciated, thanks guys.
Using bootstrap modal use this:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reportModal"> Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tambah Data Siswa</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"> ... </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
For more info check
https://getbootstrap.com/docs/4.0/components/modal/
Related
I need to add a modal popup to the following web app:
https://github.com/gunet/openeclass/tree/3.12.x
<div class="modal fade" id="wizardmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Property</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Smart Wizard HTML -->
<div id="smartwizard">
<ul>
<li>Step 1<br /><small>Add Property</small></li>
<li>Step 2<br /><small>Type of Property</small></li>
</ul>
<div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
I'm using modal show.
$(window).on('load',function(){
$('#wizardmodal').modal('show');
});
In which file and which line should i add the above?
I have tried adding the above in index.php but nothing shows up
I can see from your code you're running bootstrap version 4. Here's a link to the documentation for how to use a modal https://getbootstrap.com/docs/4.6/components/modal.
I added a little modification to your code to get it to run. Check it below.
$(window).on('load',function(){
$('#wizardmodal').modal('show');
});
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="modal fade" id="wizardmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Property</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×<span>
</button>
</div>
<div class="modal-body">
<!-- Smart Wizard HTML -->
<div id="smartwizard">
<ul>
<li>Step 1<br /><small>Add Property</small></li>
<li>Step 2<br /><small>Type of Property</small></li>
</ul>
<div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I try to click the emp['rec_no'] value, it does not display the content of rec_no, my modal window is empty. The content of $rec_no should display inside the modal window.
Thank you so much for your help in advanced
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Reservation Details</h4>
</div>
<div class="modal-body">
<?php
$rec_no = $_GET['rec_no'];
$alumni_open = "SELECT * FROM reservation WHERE rec_no = '$rec_no'";
$alumni_query = mysqli_query($connector,$alumni_open) or die
(mysqli_error());
$row = mysqli_fetch_array($alumni_query);
echo $row['rec_no']; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- MODAL END -->
<!--TRIGGER WHERE THE USER WILL CLICK THE VALUE OF $emp['rec_no'] -->
<a href="#myModal<?php echo $emp['rec_no'];?>" data-toggle='modal' data-
target='#myModal'><div align="center"><div class="glyphicon glyphicon-remove"
style="color:#FFFFFF"></div>
I have this http://localhost/student/stud.php?id=1 in my URL since I get id of the following student. When I hover on my modal, it will not display because of this URL in the status bar: http://localhost/student/stud.php?id=1#modal. Any help? How can I solve this problem?
Check if the url has an ID using the GET method. Below is an example.
<?php if (isset($_GET['id'])) { ?>
<div class="modal fade in" id="myModal" role="dialog" style="display: block;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
?>
Basically I'd like to do this:
a href=msgtest.php?the_id=$sender_id
but using this:
a href=''data-toggle='modal' data-target='#myModal30'
How can I pass data using the link that toggles the modal
HTML
<a data-toggle="modal" class="btn btn-info" href="msgtest.php?<?php the_id=$sender_id ?>" data-target="#myModal">Click me !</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<?php
echo $_GET["the_id"]
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
Suppose I have a form with the form id = "form1":
<form id="form1">
<input type="text">
</form>
I'm also displaying a button that allows the user to bring up a modal:
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
Click here to zoom in!
</button>
The challenge is that I want my modal to show the same form (form1), but so far I have not had much luck getting this. Below is my modal code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>This is my header</h3>
</div>
<div class="modal-body">
<!-- I WANT TO ADD THE INPUT FORM THAT EXISTS OUTSIDE THE MODAL HERE -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
Is this possible? If so, how?
If the form and all this mark up is on the same page then put the form tag inside the div with class modal-body if that still does not work use java-script to show the modal. Here is sample working code,
<button class="btn btn-primary btn-sm" data-toggle="modal" id="showModalPopup" data-target="#myModal">
Click here to zoom in!
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">This is my header</h4>
</div>
<div class="modal-body">
<form id="form1">
<input type="text" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#showModalPopup').on('click', function(e) {
e.preventDefault();
$('#myModal').modal('show');
});
});
</script>
I hope it helps.