I'm using double bootstrap modal from Open modal inside a Modal
my sample code jsFiddle
I want to give hiddenvalue to my buttons and call it in the another modal but I'm not using form so I can't use hiddenvalue=""
<button data-toggle="modal" **value="Johndoeinfo"** href="#stack2">John Doe</button>
<button data-toggle="modal" **value="Alexgrayinfo"** href="#stack2">alex gray</button>
i want my modal 2 be like
<div id="stack2">
<?php
$value = button value;
echo $value;
?>
</div>
Is that possible with PHP?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- <button type="button" class="btn btn-info btn-sm" name="okBtn" value="<?= $arrData ?>" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
<button type="button" class="btn btn-info btn-sm" name="okBtn" value="myValue" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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><?php echo "<script>document.getElementsByName('okBtn')[0].value;</script>"; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
<button type="button" class="btn btn-info btn-sm" id="okBtn" value="myValue" data-toggle="modal" data-target="#myModal">Open Modal</button>
<?php
$dom = new DOMDocument();
$btns->getElementById("okBtn");
foreach ($btns as $btn) {
foreach ($btn->attributes as $attr) {
$name = $attr->nodeName;
$value = $attr->nodeValue;
echo "Attribute '$name' :: '$value'<br />";
}
}
?>
Related
I had create a php code for doing CRUD application,To-do-list. Then I run it on my browser and it is not pop-up and do nothing, when I click the "Add Task" button.
<button type="button" data-target="#myModal" data-toggle="modal" class="btn btn-success">Add Task</button>
check my full code on codeply.
<!DOCTYPE html>
<html>
<head>
<script>
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"
</script>
<script>
src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity = "sha384-Rc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA712mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin = "anonymous"
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" intergrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg320mUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>CRUD App</title>
</head>
What should I do, Thanks for your help.
You should add <div id="myModal" class="modal" tabindex="-1" role="dialog"> like below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" intergrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg320mUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>CRUD App</title>
<button type="button" data-target="#myModal" data-toggle="modal" class="btn btn-success">Add Task</button>
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
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
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 } ?>
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
}
?>
I have a link that when the user clicks it, a modal will show containing the following:
<?php
include ('dbcontroller.php');
if(isset($_GET['view_id']))
{
$id=$_GET['view_id'];
$sql = mysqli_query($conn, "SELECT * from press where id='$id'");
$row = mysqli_fetch_array($sql);
?>
<input type="hidden" value="<?php echo $row['id']; ?>" />
<?php echo $row['reason']; ?>
GO BACK
<?php
}
$conn->close();
?>
The code above is what I did so that when the user click the link, it will redirect him to that page. But i want it to be in modal dialog instead since it's not much content.
This is the link that the user clicks. How will I open this link into a modal dialog?
Click to view
I've seen some on this site and elsewhere but all they have is a link without an ID to view modal dialog. I didn't find an issue same with mine so I decided to ask for help.
hey you can use following code to get row value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<br><br><br><br>
<table id="prab" border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="Jackson"><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>50</td>
<td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="smith" ><span class="glyphicon glyphicon-envelope"></span>Invite</button></td>
</tr>
</table>
<!-- 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>clicked value </p>
<input type="text" id="valueof" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#prab').click(function(e){
// alert($(e.target).val());
document.getElementById("valueof").value = $(e.target).val();
})
</script>
</body>
</html>