Currently, my modal HTML codes are located below my original template. Every time I load the page template, it will load that entire source codes included modal. Is there any way to load that modal HTML codes after the user clicks a button?
HTML
<!-- Template Codes-->
<button data-toggle="modal" data-target="#modal-content" type="button" ng-click="openModal()" class="btn btn-xs btn-default">
<i class="fa fa-pencil"></i>
</button>
<!-- My Modal-->
<div id="modal-content" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="block block-themed block-transparent remove-margin-b">
<div class="block-header bg-primary-dark">
<ul class="block-options">
<li>
<button data-dismiss="modal" type="button"><i class="si si-close"></i></button>
</li>
</ul>
<h3 class="block-title">Content</h3>
</div>
<div class="block-content block-content-full">
<!-- Some Contents-->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-sm btn-default">Close</button>
<button type="button" data-dismiss="modal" ng-click="" class="btn btn-sm btn-primary"><i class="fa fa-check"></i> Update</button>
</div>
</div>
</div>
you have two way:
1- directly call modal using inline attr:
<button data-toggle="modal" data-target="#modal-content" type="button" class="btn btn-xs btn-default" data-target="#modal-success-Public">
<i class="fa fa-pencil"></i>
</button>
2- use jQuery method:
$("#modal-content").modal("show")
for more details you can see this link
You can specify modal template in a separate html file and then do this.
<a data-toggle="modal" href="linktoyourmodaltemplate" data-target="#modal">Click me</a>
Related
I've been making a crud application in laravel. The application was working fine until I decided to change some code. The modal was showing up when I was running the code earlier and when I tested a few hours ago it was just working fine. But now when I try to click on the add button, the url just changes and nothing shows up anymore. If anyone can help me I'll appreciate it. I've just been learning laravel for a few months now. Here's my code.
#extends('layouts.master')
#section('content')
<div class="container">
<div class="row p-3">
<div class="col-md-11 card p-3">
<h5 class="text-center text-primary">Products</h5>
<div class="form-group">
<a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="fa fa-plus"></i>
</a>
<div class="modal fade" id="exampleModal" 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">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
I just want the modal to pop up when I click on the button. Even though nothing shows up on the modal as for now. The js and cdn links are included in my file.
Remove bs from data-bs-toggle & data-bs-target
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-plus"></i>
</a>
I have a following link:
<a type="button" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="?id='.$row['upcoming_event_id'].'">
<i class="fa fa-search"></i> Read more</a>
The read more looks like this:
When I press the read more button, a modal will pop up like this:
I tried the following code but it's not working:
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <?php echo $_GET['id']; ?></h3>
</div>
</div>
</div>
</div>
</div>
</div>
How to solve this? Or is there any better way to do this? I have to show the id into the modal, not on another page. Any help will be appreciated. Thanks in advance.
PHP code execute first, so you can't set PHP value for $_GET dynamically. Use a javascript function.
function setEventId(event_id){
document.querySelector("#event_id").innerHTML = event_id;
}
Call setEventId() function from anchor tag
<a type="button" onclick="setEventId(<?= $row['upcoming_event_id'] ?>)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
And use <span id="event_id"></span> to replace html value with event_id
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
Here is demo example after getting value of $row['upcoming_event_id'] or page load.
function setEventId(event_id){
document.querySelector("#event_id").innerHTML = event_id;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<a type="button" onclick="setEventId(1)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
<a type="button" onclick="setEventId(2)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
<a type="button" onclick="setEventId(3)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
</div>
</div>
</div>
</div>
On your button add a data attribute containing your id, like this :
<a type="button" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" data-id="'.$row['upcoming_event_id'].'" href="?id='.$row['upcoming_event_id'].'">
<i class="fa fa-search"></i> Read more</a>
Then in JS you need no write an event listener function automatically called when your modal is open. for your need this function seems like :
$('#product_view').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var modal = $(this)
modal.find('.modal-title').text('I want to show the event id here ' + id)
})
See official documentation here
What you can do is to use html data attribute on your tag. let's say :
<a href="#openModal_edit" data-idValue="<?= $row['upcoming_event_id'] ?>" ...</a>
Then you need to create onclick event handler, maybe on your modal button to extract your data attribute :
onclick="myId=this.dataset.idValue;document.querySelector('#THE_HTMLID_THAT_YOUWANT_DISPLAY_IDVALUE').value = myId;return true;"
and make sure in querySelector you add the element id that you want show the value on it.
I have a problem and can not solve. I have a button that when you click on it displays a message to the user confirmation, it happens that before opening this modal I would like to validate that all fields are filled.
For validation I am using the lib Parsley
If I only use simple button as below the validation is successful.
<button class="btn btn-primary" type="submit">Submit</button>
But if you use the button that calls the modal can not use the validator before.
<button data-toggle="modal" data-target="#md-default" type="button" id="postar" class="btn btn-info btn-lg"><i class="fa fa-check"></i> <b>Enviar</b></button>
<!-- Modal -->
<div class="modal fade" id="md-default" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<div class="i-circle primary"><i class="fa fa-check"></i></div>
<div class="confirmacao" id="confirmacao">
<h4>Confirma o envio do Push?</h4>
</div>
<div class="resp"></div>
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal" id="cancelButton" >Cancelar</button>
<button type="submit" class="btn btn-primary btn-flat enviar" id="submitButton" >Sim</button>
<button type="button" style="display: none" class="btn btn-default btn-flat" data-dismiss="modal" id = "closeButton">Fechar</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
You can open modal manually like below:
.on('form:submit', function() {
$('#md-default').modal('show');
return false;
});
Codepen link
I have two tabs in a page, both tabs contain a modal class. Modal in the first tab works fine, i.e. it fades-in and loads the content.However, when I switch to the next tab it only fades-in and doesn't show the content when I used chrome debugger I found in the first tab is comming while in second tab is comming
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
{{category.name}}{{$parent.$parent.$index}}{{$index}}
<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog">
{{$parent.$parent.$index}} -- {{$index}}
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content" >{{category.name}}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<p>
<input type="text" class="form-control"
name="uri" placeholder="Add URL" ng-model="uri">
</p>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="addCustom()"
class="btn btn-success btn-sm col-lg-2 col-md-offset-3 glyphicon glyphicon-ok"
data-dismiss="modal">Add</button>
<button type="button"
class="btn btn-success btn-sm col-lg-2 col-md-offset-7 pull-centre glyphicon glyphicon-remove"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
I have a main page which contains an iframe, in this iframe, I have a button to click to make running a popup but only runs inside the iframe and I want to be global to the homepage.
this is the code for modal using getboostrap
I have this code in homepage:
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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><!-- /.modal-content -->
this is the code for the button on the iframe:
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
</button>
The problem is that I cant access to the item in the homepage with id="mymodal".
Thanks
You must create a javascript function in your homepage and while you click inside the iframe on that button you must access the homepage function ussing parent.myfunction('myModal'); or your current id.
So in your homepage you will have something like this:
function myfunction(id){
//open the modal with the id = your entry id
}
And inside the iframe you won't have this anymore:
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
</button>
insted you would have:
<button type="button" class="btn btn-default btn-lg" onclick="parent.myfunction('myModal')">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
</button>