i want to show this
Route::resource('tags', 'TagsController');
in this modal
<div class="modal" id="modaldemo9">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-demo">
<div class="modal-header">
<h6 class="modal-title">Supprimer tags </h6><button aria-label="Close" class="close" data-dismiss="modal"
type="button"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
</div>
</form>
</div>
</div>
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>
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>
?>
i am making a function is when customer click the quickview button it will be open the modal have a infomation about that product, but i don't know how to do this, i try some method but not working, so please help me.
This is my view :
<div class="row">
<h4>Feauture Product</h4>
</div>
<form method="post">
<div class="row">
<div class="product">
<?php foreach ($infolist as $info_key){ ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://wingsacessorios.com.br/public/img/vertical/img-home05.jpg" class="img-responsive">
<div class="caption">
<h5 class="text-justify">Name product: <?php echo $info_key->name; ?></h5>
<p class="text-justify">Price: <?php echo $info_key->price.' VNĐ'; ?></p>
<p class="text-center"> </i> Buy Now<i class="fa fa-eye" aria-hidden="true"></i> Quick View</p>
</div>
</div>
</div>
<?php }?>
</div>
<!-- Small modal alert when click add cart -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header" style="padding:5px 10px 5px 10px;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel" style="background-color:transparent;color:#000000;">Alert from website !</h4>
</div>
<div class="modal-body">
<h5>Added product to your cart!</h5>
</div>
</div>
</div>
</div>
<!-- Modal quickview -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Modal title</h4>
</div>
<div class="modal-body">
</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>
</div>
</div>
if i put modal quickview code in for each loop it just display infomation of first product
To open what you have above you'll need to open the modal with
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
pay special attention to the 'data-target'. that must match the ID of your modal div:
<div class="modal fade" id="myModal"... <---
If you have multiple products on the same page your best bet will be to generate modals programmatically with Bootstrap JS Modal.js plugin
http://getbootstrap.com/javascript/#modals
edit
This is one way to do what I believe you're looking for. I may have missed a variable echo, but the basics are there.
<?php foreach ($infolist as $info_key): ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://wingsacessorios.com.br/public/img/vertical/img-home05.jpg" class="img-responsive">
<div class="caption">
<h5 class="text-justify">Name product: some product</h5>
<p class="text-justify">Price: 12 VND</p>
<p class="text-center"> </i> Buy Now <i class="fa fa-eye" aria-hidden="true"></i> Quick View</p>
</div>
</div>
</div>
<!-- Small modal alert when click add cart -->
<div class="modal fade bs-example-modal-sm" id="cartModal<?php echo $info_key->id; ?>" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header" style="padding:5px 10px 5px 10px;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel" style="background-color:transparent;color:#000000;">Alert from website !</h4>
</div>
<div class="modal-body">
<h5>Added product <?php echo $info_key->id; ?> to your cart!</h5>
</div>
</div>
</div>
</div>
<!-- Modal quickview -->
<div class="modal fade" id="myModal<?php echo $info_key->id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>Product <?php echo $info_key->id; ?></p>
</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>
</div>
</div>
<?php endforeach ?>
I have this link where i open modal:
<li><i class="fa fa-times"></i></li>
And i have modal in seperate page modals.blade.php
<div class="modal fade modal_form" id="deleteProperty{{$property->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel5" aria-hidden="true">
<div class="modal-dialog" role="document">
<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="exampleModalLabel5">Are you sure you want to delete this property?</h4>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('user.property.delete',[$user->id,$property->id])}}">
<div class="form-group">
<div class="left-btn">
<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
</div>
<div class="right-btn">
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
How can i pass this parameter ($property->id) to modal so when user click on specific property, to delete that property?
You need to pass the variables you want to use in the included views.
Example:
#include('standardUser.includes.modals', [ "property" => $property ])
I don't know what's wrong with the code, but i get the different result for the same query.
My select query (in the controller):
$this->db->select('*');
$this->db->from('vendor_location');
$query = $this->db->get();
$data['location'] = $query->result_array();
My partial view (modal bootstrap):
<div class="modal fade" id="add_driver_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">ADD DRIVER</h4>
</div>
<div class="modal-body" id='add'>
<div class="row" id="add_driver_form">
<?php var_dump($location);?>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="add" type="button" class="btn btn-primary btn-md" onclick=add_driver()>Add</button>
</div>
</div>
<div id="form_submit_result"></div>
</div>
</div>
<!-- Edit driver modal -->
<div class="modal fade" id="edit_driver_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">EDIT DRIVER</h4>
</div>
<form method="post" action="<?php echo base_url(); ?>portal/edit_driver">
<div class="modal-body" id='add'>
<div class="row" id="edit_driver_form">
<?php var_dump($location);?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save" type="submit" class="btn btn-primary btn-md">Save</button>
</div>
</div>
</div>
</div>
When I var_dump($location) in the add_driver_modal, I get the expected result (all records from vendor_location table). But I just get the last record (one row) in the edit_driver_modal. How could this happen?