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>
Related
I have a PHP loop that creates a series of buttons with unique data attributes. When these buttons are clicked they open a modal which collects the values of the data attributes on the button, and uses them to prepopulate the form. Can be seen here: https://getbootstrap.com/docs/3.3/javascript/#modals-related-target
The modal opens, but doesn't display the data I'm trying to collect. I also cannot get core functions such as alert(); to work.. and I'm lost.
I have tried using jQuery's data() and the relevant data attributes, but when they also didn't work I stuck to using attr().
Can anyone help?
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="7" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="7" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" 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 check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
alert();
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
)}
});
</script>
It seems you have an error in your code. Try this:
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="8" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="9" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" 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 check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>
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>
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
MY Code is
<button data-target="#myModal" data-toggle="modal" class="pink_button">Add Selected to Shopping List</button>
And my Popup Code is
<div class="modal-content">
<form class="listingServes">
<div class="modal-header">
<button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
<h4 id="myModalLabel" class="modal-title">Add Ingredients to Shopping List</h4>
</div>
<div class="modal-body"><p><label for="recipe_491">Ancient Grain Pilaf with Broccoli Serves : </label><input type="number" value="" placeholder="Enter No. of Servings" class="drop recipe_491" rel="491" name="recipe_491"><span style="float:right;cursor:pointer;font-weight:bold" class="removeRecipe">x</span></p></div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-primary modaladdtocart" type="button">Add to Shopping List</button>
</div>
</form>
</div>
I am click on button then my Popup show but without takes any data please help me how to open my Popup on Button Click so takes proper data....
Please Help me All Tester...
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>