I want to display a modal by checking if a PHP session exists, the following is the code :
<?php if(isset($_SESSION['login'])) { ?>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Body</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script>$("#myModal").modal("show");</script>
<?php } ?>
This is not working.
I have also referred previous similar questions but they do not give a clear picture.Please help.
First, I would suggest to separate the .js file from the .php
Because -sometimes- I also need to run php code in my js files, this is a little "trick" that I like to do:
The js file, should have extension .php (in order to trigger the php interpreter) and thus the filename could look something like that: scripts.js.php. Here I also assume that you have your main file called for example: index.php.
Now, let's bake the cake:
Sample of the index.php file:
<html>
<head>
<!-- here include your head elements and styling -->
<link href="path/to/bootstrap.css" rel="stylesheet">
<link href="path/to/other.css" rel="stylesheet">
</head>
<body>
<!-- here goes the body code -->
<!-- my practice is to include the modal code and scripts at the end of the file -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>Body</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<?php
$show_modal="";
if(isset($_SESSION["login"])){$show_modal="1";}else{$show_modal="0";}
include("scripts.js.php");
?>
</body>
</html>
And here is my suggestion for the scripts.js.php file:
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script>
<script src="path/to/otherfile.js"></script>
<script>
$(document).ready(function(){
var showModal = '<?php echo $show_modal; ?>';
if(showModal=="1"){$("#myModal").modal("show");}
});
</script>
This is a solution that always work for me... Hope it works for you too!
Related
please help, i have a bootstrap template with this footer , i trying to add a modal but when i click the modal button,the modal doesnt show up , is there any plugin that have not been added in my template ?
<script src="<?= base_url('template/assets/vendor/bootstrap/js/bootstrap.bundle.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/aos/aos.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/php-email-form/validate.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/swiper/swiper-bundle.min.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/purecounter/purecounter.js')?>"></script>
<script src="<?= base_url('template/assets/vendor/isotope-layout/isotope.pkgd.min')?>"></script>
<script src="<?= base_url('template/assets/vendor/glightbox/js/glightbox.min.js')?>"></script>
<!-- Template Main JS File -->
<script src="<?= base_url('template/assets/js/main.js')?>"></script>
and this the modal button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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>
Thank you
Make sure your code contains bootstrap CSS and Bootstrap Js.
Like,
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
If you are using Bootstrap5 than change data-toggle to data-bs-toggle and data-target to data-bs-target.
Edited to include proper format for more readable and understandable code. Also fixed to where the proper placement for ideal performance with the Javascript files are added to the ending of the <html> tag opposed to the <head> tag
<!DOCTYPE html>
<html>
<head>
<title>ROWLANDS SHOP</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-
scalable=no">
</head>
<body>
<div class="modal fade details-1" id="details-modal" tabindex="-1"
role="dialog" aria-labelledby="details-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" onclick="closeModal()"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" class="text-center"><?=
$product['title'];?></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="center-block"></div>
<img src="<?= $product['image'];?>" alt="<?
=$product['title'];?>" class="details img-responsive">
</div>
<div class="col-sm-6">
<h4>Details</h4>
<p><?= $product['description'];?></p>
<hr>
<p>price: $<?= $product['price'];?></p>
<p>Brand:<?= $brand['brand']; ?></p>
<form action="add_cart.php" method="post">
<div class="form-group">
<div class="col-xs-3">
<label for="quantity">Quaantity:</label>
<input type="text" class="form-control" id="quantity"
name="quantity">
</div>
</div>
<div class="form-group">
<label for="size">Size:</label>
<select name="size" id="size" class="form-control">
</select>
<option vaue=""></option>
<?php foreach($size_array as $string){
$string_array = explode(':', $string);
$size = $string_array[0];
$quantity = $string_array[1];
echo '<option
vaue="'.$size.'">'.$size.'('.$quantity' Avaliable)</option>';
} ?>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default"
onclick="close_modal();">Close</button>
<button class="btn btn-warning" type="submit"
class="glyphicon glyphicon-shopping-cart"><span>Add to Cart</span></button>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</html>
Is other styles from Bootstrap Working? And could you please give more information such as where you are including the Javascript and Popper.js? I'm sorry but there is so much little information that is given that it could simply just be it's not loading Bootstrap into the project. Please revise and add some more information that can possibly help us debug this for you.
Here is the boilerplate for a modal in bootstrap and a trigger with a button. Take this and see if this works for you and then you can re-add the other components you had to it. If this doesn't open up a modal then it might just be a loading problem with Bootstrap.js.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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>
Here is the link to the official Bootstrap Documentation. https://getbootstrap.com/docs/4.4/components/modal/
Also Please note that the code you have provided is missing the required Popper.js file. Please Add this code above the ending <html> tag.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
If you simply don't want to use the online versions of the Bootstrap.js, Jquery.js, or Popper.js Here are the websites where you can find them and download them to easily extract to your project.
Jquery Code Uncompressed: https://code.jquery.com/jquery-3.4.1.js - Just save this into a file called jquery.js and include it with a script tag
Bootstrap.js: Can be downloaded from the official Bootstrap Website - https://www.getbootstrap.com
Popper.js: https://popper.js.org/ - Can be downloaded here
Also please read the StackOverflow Guide to asking a good question you can find here at: https://stackoverflow.com/help/how-to-ask
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/
Scenario - I am planning to load an external PHP file which contains an Update form inside a modal pop-up on a jquery button click event.
I am able to load pop-up on button click but could not find a clear and brief solution to load an external file inside the modal pop-up. For the sake of example lets assume the edit form has just email text field.
NOTE- I am trying to load file locally
JS Fiddle - jsfiddle.net/1aeur58f/1
I want to display the file content inside the body of the pop-up as shown in the JsFiddle
So, I do not think that you have to load an external source at all. If you would like to include the content in the page, I think that you should do something like I did below.
<?php
$user = $client->get('account');
?>
<!-- Make the model show up -->
<!-- Pretend this is the form -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal
</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"><?= 'Some kind of 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>
Suppose I have a form with the form id = "form1":
<form id="form1">
<input type="text">
</form>
I'm also displaying a button that allows the user to bring up a modal:
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
Click here to zoom in!
</button>
The challenge is that I want my modal to show the same form (form1), but so far I have not had much luck getting this. Below is my modal code:
<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">
<h3>This is my header</h3>
</div>
<div class="modal-body">
<!-- I WANT TO ADD THE INPUT FORM THAT EXISTS OUTSIDE THE MODAL HERE -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
Is this possible? If so, how?
If the form and all this mark up is on the same page then put the form tag inside the div with class modal-body if that still does not work use java-script to show the modal. Here is sample working code,
<button class="btn btn-primary btn-sm" data-toggle="modal" id="showModalPopup" data-target="#myModal">
Click here to zoom in!
</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">This is my header</h4>
</div>
<div class="modal-body">
<form id="form1">
<input type="text" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#showModalPopup').on('click', function(e) {
e.preventDefault();
$('#myModal').modal('show');
});
});
</script>
I hope it helps.