Make a modal pop up when an if-statement is satisfied - php

I want a modal popup after an if-statement is satisfied. The following is a sample of the code:
<form action="" method="post">
<button type="submit" name="btn">Test</button>
</form>
<?php
if (isset($_POST['btn'])) {
//then trigger the modal pop-up
}
?>

If you want open modal window then you have to use javascript / jquery as shown below
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="" method="post">
<button type="submit" name="btn">Test</button>
</form>
<?php if (isset($_POST['btn'])) { ?>
<script>
$(function() {
$("#myModal").modal();//if you want you can have a timeout to hide the window after x seconds
});
</script>
<!-- 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>Sample modal window</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>

Related

modal is not opening and not showing any error (all divs are closed)

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

how to popup modal form inside of blade

I give up. Such a simple thing. Can someone tell me why this modal refuses to popup when I click the button?
#extends('index')
#section('title', 'Labs')
#section('content')
>Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to save changes to this document before closing?</p>
<p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#endsection
If its not inside a section then it works. But my page has a navigation bar and that won't show if code is not inside the #section.
EDIT: Here's how it looks inside my app:
When I click the "Launch demo modal" button, nothing happens.
If I change the code to this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<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>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>
</div>
</body>
</html>
Then it works fine, but no more navigation bar.
Apparently the head section with the link and script info is needed. The following code works.
#extends('index')
#section('title', 'Labs')
#section('content')
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<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>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>
</div>
</body>
</html>
#endsection

How to pass variables to a modal from a link

I have a navigation bar with some links. The links all trigger the same modal but I need to display different information inside the modal based on the link. I'd prefer a non-jQuery solution but if it is necessary I'll take it.
I tried this...
firstpage.php
<li>My Messages</li>
<li>My Notifications</li>
<!---Modal -->
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<?php include 'modal.php';?>
</div>
</div>
</div>
<!-- Modal -->
modal.php
<!--
=============================
ISSET_GET MESSAGES
=============================-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messages</h4>
</div>
<div class="modal-body">
<p>some text here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!--
=============================
ISSET_GET NOTIFICATIONS
=============================-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Notifications</h4>
</div>
<div class="modal-body">
<p>some text here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
I think you should render all of your modals at the bottom of the page and use jQuery to to load the modal associated to the link.
e.g.
<button type="button" class="btn btn-info btn-lg" id="myBtn1">Open Modal 1</button>
Then bind bootstraps .modal() function to the button's click event with jQuery. This is where you can set which modal to load eg.
$("#myBtn1").click(function(){
$("#myModal1").modal();
});
Please run my code snippet which I have modified from w3 schools documentation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate multiple Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn1">Open Modal 1</button>
<button type="button" class="btn btn-success btn-lg" id="myBtn2">Open Modal 2</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" 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">Look its modal one</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>
<div class="modal fade" id="myModal2" 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">look its modal 2</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>
</div>
<script>
$(document).ready(function(){
$("#myBtn1").click(function(){
$("#myModal1").modal();
});
$("#myBtn2").click(function(){
$("#myModal2").modal();
});
});
</script>
</body>
</html>
original source of code that I modified:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_js&stacked=h

Why not working my modal correctly?

I have the following form code:
<div class="modal" 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>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>
<form action="/admin/menuContent.php?id=<?php echo $menuId ?>" method="post">
//few inputs...
<div class="col-sm-1">
<input id="editButton" class="btn btn-success editButton" type="submit" value="Save" data-toggle="modal" data-target="#myModal" role="button">
</div>
<div class="col-sm-1">
Cancel
</div>
</form>
And my problem is that after click save button the modal appears but just for a second or less, what can be a problem? Thanks for helps! :)
that error come just because of url passed in form action.try to figure out that.whether you have passed correct url or not.
i have tried this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<div class="modal" 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>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>
<div class="col-sm-1">
<input id="editButton" class="btn btn-success editButton" type="submit" value="Save" data-toggle="modal" data-target="#myModal" role="button">
</div>
</div>
</div>
</body>
</html>
You should not trigger form submit and modal with a single submit button.When you trigger the submit button the modal disappears and direct to menuContent.php.You should use some client side programs to pass the parameters into the php.
When you click the save button, the form was submitted.
So this goes to action page. (action="/admin/menuContent.php?id=")
Please refer this and solve your problem: https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Calling BS Modal on form submission

This is my page, how to get modal after form submit.
I want to get Modal as I am in requirement of doing such task. This is just simple practice modal page for my understanding.
<?php
if(isset($_POST["btn"]) && $_POST["btn"]=="Submit")
{
?>
<script type="text/javascript">
$(window).load(function()
{
$('#myModal').modal('show');
});
</script>
<?php
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
<form method="post">
<div class="col-sm-4">
<input type="text" name="text" class="form-control"> <br>
<input type="submit" name="btn" class="btn btn-danger">
</div>
</form>
<!-- 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>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>
</div>
</body>
</html>
First of all do not include <script> tags outside the html tags, put them in the <body> or <head> tags. Whenever you are working with the DOM and jQuery, wrap your code in a document ready closure. Ex:
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>
You need to place your jQuery after the definition of the modal in the HTML Since you can not display a BS modal before the HTML page and the modal is defined.
Also the POST response from the form submit button is "Submit Query" not just "Submit".
Put the following PHP under the last </div> tag from the modal definition and the before the </body> tag and it will work:
<?php
if(isset($_POST["btn"]) && $_POST["btn"]=="Submit Query")
{
?>
<script type="text/javascript">
$('#myModal').modal('show');
</script>
<?php
}
?>

Categories