I would like that when clicking the button it presents the data-id in the modal.
<button data-id="$id" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">OPEN</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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<?PHP echo $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>
I tried several tutorials and it did not work, will it be the jquery version?
How do I print the ID within the modal?
You can create an event on your button.
var myBtn = document.getElementByClassName("btn");
myBtn.addEventListener("click", function() {
var dataId = document.getElementByClassName("btn").dataset.id;
console.log(">>>>dataId: ", dataId);
document.getElementByClassName("modal-body").innerHTML = dataId;
});
Related
how to open a modal with id from this code
Scale Points
example modal
'''
<!-- 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>
'''
If you want to open the modal on the current page, you can do something like this:
Open modal
and the modal should look like this:
<div class="modal-content" id="modal-<?php echo $row['id_user']; ?>">
<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>
With the official bootstrap modal example:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-<?php echo $row['id_user']; ?>">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal-<?php echo $row['id_user']; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-<?php echo $row['id_user']; ?>" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel-<?php echo $row['id_user']; ?>">Modal title</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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I'm generating dynamic links but when I click a link the modal window is opening behind the faded div so that I can't then click anything. Any idea how I can make it appear on top so that it can be closed?
Also how can I stop the page from jumping to top when clicking one of the links? I want the scroll position to stay the same so that you don't have to try and find out where you were on the page. Any help appreciated.
<script>
function showModal(el) {
jQuery("#myModalLabel").text(el.title);
jQuery("#myModal").modal()
}
</script>
<a href="#" id="mymodal" onclick="showModal(this)" style="font-size:16px;"
title="<? echo $row ['title'] ?>
by
<? echo $row ['author'] ?>" ><? echo $row ['first_line'] ?> </a>
<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>
</div>
<div class="modal-body">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
Fixed. Just needed to move outside containers to just before the closing body tag
Try this one dude
HTML
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="yourModal" data-target="#myModal" data-title='<? echo $row ["title"] ?> by <? echo $row ["author"] ?> '><? echo $row ['first_line'] ?></button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<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" id="myModalLabel">Modal title</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>
javascript (jquery)
<script>
$(document).on("click", "#yourModal", function () {
var title = $(this).data('title');
$("#myModalLabel").val( title );
});
</script>
I just want to ask why my reCAPTCHA is not working when my form is in the bootstrap's modal? Have you ever experienced it?
sign.php
if(empty($_POST['g-recaptcha-response']) === false){
echo "Set.";
} else {
echo "Not set.";
}
index.php
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Open form
</button>
<!-- Modal -->
<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">
<form action="sign.php" method="post">
<div class="form-group">
Name:
<input type="text" name="name" id="name">
</div>
<div class="form-group">
reCaptcha:
<div id="r1" class="g-recaptcha" data-sitekey="6Lc-xQUUAAAAAFc4apq1qbS_VI-ZTJHalsj5BGaa"></div>
</div>
</form>
</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>
..I have sign.php to check if the reCAPTCHA is working. Although it is working if I dont use modal, but when I used modal, the recaptcha validation(sign.php) is not working.
You are not submitting the value of the recaptcha to the backend i.e to php script. Your submit button should be inside </form> tag else your form will not get submitted.
check
your response to the backend---
if (isset($_POST['g-recaptcha-response'])) {
$response = $_POST['g-recaptcha-response'];
echo($response);
}
else {
echo"value is not passing to the php script";
}
Hope this helps!
<button id="showModal" type="button">Show Modal</button>
<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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div id="captcha"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JQUERY
$("#showModal").click(function() {
$("#myModal").modal("show");
setTimeout(function() {
createRecaptcha();
}, 100);
});
function createRecaptcha() {
grecaptcha.render("captcha", {sitekey: "6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG", theme: "light"});
}
Example: http://fiddle.jshell.net/emilhem/Lgovn28f/4/
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 -->
I have my html code as:
<button class="btn btn-default" id="openForm">
New
</button>
<!-- Modal -->
<div class="modal fade hide" id="formModal">
<div class="modal-header">
<h4>
Form
</h4>
</div>
<div class="modal-body" id="formModalBody">
</div>
<div class="modal-footer">
Close
</div>
</div>
My Java script reads as:
$(document).on('click', '#openForm', function(e) {
e.preventDefault();
$("#formModalBody").html("");
$("#formModal").modal('show');
$.post('index.php/customers/view/-1/',
{id: -1},
function (html) {
$("#formModalBody").html(html);
}
);
});
I am using Twitter Bootstrap & Codeignitor. The post url above is index.php/Controller/function
When I am clicking on the button; I am not able to see the Bootstrap Modal. The page fades in, but there is no modal visible.
this is for bootstrap 3 and can be triggered by html alone without javascript it will run
Launch demo modal
<!-- 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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" id="formModalBody">
</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>
<!-- For javascript -->
$.post('index.php/customers/view/-1/',
{id: -1},
function (html) {
$("#formModalBody").html(html);
}
);
You should use anchor link instead of button, it will work default settings
<a href="/model_link" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</a>
The href link response code will append in
<div class="modal-body" id="formModalBody">
<!-- modal body -->
</div>