I was wondering if it is possible to catch a whole php page in a modal.
It is about this situation:
I have now an anchor which leads me to the page like this:
<?php echo $article['title']; ?>
How can i put the whole content of, lets say, the page post.php?id=1 in a modal like this:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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">Modal Header</h4>
</div>
<div class="modal-body">
<p>HERE SHOULD COME THE CONTENT OP THE PHP FILE</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
in post.php; these are the lines which parse the content:
<h3> <?php echo $article['title']; ?> </h3>
<p class="content article-content"> <?php echo nl2br($article['content']); ?> </p>
Using jQuery you can do something like this:
$('#modal-body').load('/your/url/here', {var1: val1, var2: val2}, function(){
// show your modal here
});
See here for more info https://api.jquery.com/load/
Related
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 using bootstrap modal to display member's information. Each member has the button to open the modal. I have this button in loop:
#foreach($members as $member)
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View Details</button>
#endforeach
This modal content:
<div id="myModal" class="modal fade" 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">Member Detail Information</h4>
</div>
<div class="modal-body">
{{$member->name}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
But everytime I get the last member's information. This is obvious but i want to pass the $member->ID from the button and dispaly their respective details in the modal. How Can I acheive this?
You can use data attribute to pass some data into Bootstrap modal.
Buttons in the loop
#foreach()
<a data-toggle="modal" data-id="{{$member->name}}" href="#UserDialog" class="user_dialog">Details</a>
#endforeach
Bootstrap model
<div class="modal hide" id="UserDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="user_name" id="user_name" value=""/>
</div>
</div>
And little JavaScript
$(document).on("click", ".user_dialog", function () {
var UserName = $(this).data('id');
$(".modal-body #user_name").val( UserName );
});
That's it
Little demo here : http://jsfiddle.net/Au9tc/6247/
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 have a PHP website and am using Bootstrap for the framework. When I hit a button a modal opens to show some info. I would like to know how to send a variable to this modal from the previous page.
The button is in index.php and the modal code is in modals.php.
This is the modal code:
index.php
require("modals.php");
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
modals.php
<!-- Modal -->
<div id="myModal" class="modal fade" 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">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>
What I'm looking for is something like you would do with a url: <button data-target="myModal&id=1"> and then pick it up with $varId = $_GET['id'] inside the modal.
Is there a way?
index.php (Give class name openModal button, which is used in <script></script>. Give data-id attribute, pass value to it.)
<?php require("modals.php");?>
<button type="button" class="openModal btn btn-info btn-lg" data-toggle="modal" data-id='1' data-target="#myModal">Open Modal</button>
Place this code somewhere in same page.
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
JS (fetch data-id from Open Modal button. and, pass it to ajax_modal.php page)
<script>
$('.openModal').click(function(){
var id = $(this).attr('data-id');
$.ajax({url:"ajax_modal.php?id="+id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
ajax_modal.php (If you are looking to change this page name. Change in <script></script> tag too. Both are related.)
<?php
$id = $_GET['id'];
?>
<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>Your Id : <?echo $id;?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click here
how-to-pass-current-row-value-in-modal
passing-data-via-modal-bootstrap-and-getting-php-variable
bootstrap-modal-and-passing-value
show-data-based-of-selected-id-on-modal-popup-window-after-click-a-button-php-my
passing-data-from-page-to-bootstrap-modal-using-sql-php
If you are passing something from a previous page set the variable in the query string of the url. You can then get the variable from the url query string using $_GET
e.g.
<?php $myVar = $_GET["my value"]; ?>
<div class="modal-body">
<p><?php echo $myVar; ?></p>
</div>
Or you could just use pure javascript like so.(No PHP)
HTML:
<button data-id="myModal1" data-target="#myModal" class="myModalClass">
<!-- Modal -->
<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some input text where you want to show the passed value.</p>
<input type="hidden" name="myValue" id="myValue" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and get the value using javascript
$(document).on("click", ".myModalClass", function () {
var myValue = $(this).data('id');
$(".modal-body #myValue").val( myValue ); // myValue has the value 'myModal1'
});
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>