The requirement-My applicaiton has a button which when clicked a modal is supposed to pop-up where there will contain some data.
Architecture-I want the modal data to be contributed from some another application(some url),through a php file.How can this be done?
What I have tried-In the php file i have placed
<?php echo ' <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" id="myModalLabel">Modal 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>
In the html I am using this
<div id="prerequisites-container" class="container-fluid">
<a href="http://localhost/Experiment/main/prereq.php"
data-toggle="modal" data-target="#myModal" class="btn btn-default">
Launch Modal </a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"></div>
</div>
Place your HTML code, as follows:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"></div>
inside your Echo.
<?php echo ' HERE <div class="modal-dialog">
UPDATED:
<div id="prerequisites-container" class="container-fluid">
Launch Modal
</div>
<?php echo '<div class="modal fade" id="trymodalbootstrap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<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" id="myModalLabel">Modal 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>'; ?>
place the modal html in your html, and fetch modal content data dynamically through ajax call from server. and add that data to modal before displaying
Related
I am using Django and I want to open a small forms window when I click on button 'Nouvelle Chirurgie' in template without changing the url and I don't know if I have to do it with js or no and how to do it, and after that how to save it in views. Actually, I'm this button take me to another page:
Nouvelle Chirurgie
So, what should I do?
You can use bootstrap for this
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
{{ form }}
</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 created a modal in HTML, but when i click button, i can't close popup display
enter image description here
code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-backdrop="true" data-keyboard="false">
Launch demo modal
</button>
<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">
Content
</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>
Try adding z-index for the modal-content
<div class="modal-content" style="z-index:9999">
I'm not sure if this is possible but what I'm trying to do is when user clicks a button then instead of taking the user to a different page, I want the new page to be opened in a modal, and be active there. I'm using twitter bootstrap. is it possible to do that?
bootstrap modal:
<!-- 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>
my link:
hello
How to show details data(using popup) when I click the view button in table in each rows?
button code
echo '<button href="student.php?id="'.$row['mactrixNo'].'" onclick=document.getElementById("id02").style.display="block">View</button>';
popup code
<div id="id02" class="logform">
<table border="1" class="tg w-100">
<tr>
<?php if(isset($_GET['id'])){
$query='select *
from student
where mactrixNo="'.$_GET['id'].'"';
}
?>
I can't get the 'id' when popup
Bootstrap provides the HTML, CSS, and JavaScript you need to achieve this.
This is from v4 https://getbootstrap.com/docs/4.1/components/modal/
<!-- 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>
So long as you have the CSS and JS in your <head> section, all you need to do is edit the content!
I have 2 modals on a page, each modal have different behaviors, one modal is transformed into a page content if the page is bigger than a specified width. To enable that I have used jQuery to hide its modal-backdrop but the problem is that the script will also hide the backdrop for the 2nd modal which has normal behavior. How can I assign a different ID for each modal-backdrop?
HTML
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
Launch modal with modal-backdrop id 1
</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
Launch modal with modal-backdrop id 2
</button>
<!-- Modal1 modal-backdrop id 1-->
<div class="modal fade" id="myModal1" 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">
...
</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>
<!-- Modal2 modal-backdrop id 2-->
<div class="modal fade" id="myModal2" 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">
...
</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>
You can make use of bootstrap modal's .on('show.bs.modal' event to make changes to your backdrop accordingly like one below:
$("#myModal1,#myModal2").on('show.bs.modal', function (e) {
var that=$(this);
var id=that.attr('id'); //get the id of button which got clicked
setTimeout(function(){
$('.modal-backdrop').attr('data-id',id);
//You can either assign it as data-* attribute or add it as class to backdrop like
//$('.modal-backdrop').addClass(id);
});
});
Now accordingly you can use this to make changes according to modal's behavior.
DEMO
This will solve your problem.
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false" data-backdrop="static" >