My bootstrap (3.0.2) modal won't show up. I've tried different buttons, links and all that but it simply won't show up. I appreciate any help!
<a onclick="open_popup('login');">lo</a>
<script>
function open_popup(popup) {
var data_str = 'popup=' + popup;
$.ajax({
type: "GET",
cache: false,
url: "exam.php",
data: data_str,
success: function() {}
});
};
</script>
<button data-toggle="modal" data-target="#login_pop" style="display:none"></button>
<div class="login_pop" id="login_pop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="login_modal-dialog">
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>
</div>
You can use $("#login_pop").modal("show"); to show the modal through code. Try below code.
<script>
function open_popup(popup) {
$("#login_pop").modal("show");
var data_str='popup='+popup;
$.ajax({ type:"GET", cache:false,
url:"exam.php",
data:data_str,
success:function(){ }
});
};
</script>
<a onclick="open_popup('login');">lo</a>
<div class="modal fade" id="login_pop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="login_modal-dialog">
<div class="modal-content">
<div class="modal-body"> Hello world!! </div>
</div>
</div>
</div>
</div>
JSFIDDLE
Related
<div id="editproductdiv" onclick="editproduct();"> </div>
<div id="editproductform" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:1000px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cancellation Reason </h4>
</div>
<div class="modal-body" id="editproduct" style="display:inline-block">
</div>
<div class="modal-footer" style="display:none;">
</div>
</div>
</div>
</div>
<script>
function editproduct() {
$('#editproductform').modal('show');
$.ajax({
url: 'index.php?route=order/order_details/editproduct',
dataType: 'json',
type: 'post',
data: ,
beforeSend:function(){
$("#editproduct").html('loading');
},
success:function(json){
if(json['error']){
// alert(json['error']);
} else {
$("#editproduct").html(json['editproduct']);
}
}
});
}
</script>
Problem: when i click on the button in my view page, this alert show up : https://prnt.sc/s8gn6w
The error code :
function(e){var t,n,r,i=this[0];{if(arguments.length)return
r=g(e),this.each(function(n){var
i;1===this.nodeType&&(null==(i=r?e.call(this,n,w(this).val()):e)?i="":"number"==typeof
i?i+="":Array.isArray(i)&&(i=w.map(i,function(e){return
null==e?"":e+""})),(t=w.valHooks[this.type]||w.valHooks[this.nodeName.toLowerCase()])&&"set"in
t&&void
0!==t.set(this,i,"value")||(this.value=i))});if(i)return(t=w.valHooks[i.type]||w.valHooks[i.nodeName.toLowerCase()])&&"get"in
t&&void
0!==(n=t.get(i,"value"))?n:"string"==typeof(n=i.value)?n.replace(bt,""):null==n?"":n}}
I didn't have any alert button , but this still show up
any idea why ?
Problem is in your function, you missed the opening tag (. and also empty data
instead of function editproduct)
use
function editproduct()
and you need a server to run PHP files, download WAMP or XAMPP because without a server that understands PHP it just downloads the page.
it's because missing ( or open parenthesis in you function
change to
function editproduct()
<head>
<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>
<button id="editproductdiv" name="editproductdiv" > click here</button>
<div class="container">
<!-- 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>
<script>
$(document).ready(function(){
$("#editproductdiv").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
<button type="button" onclick="editproduct();" name="button">button</button>
<div id="editproductform" class="modal fade" role="dialog">
<div class="modal-dialog" style="width:1000px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cancellation Reason </h4>
</div>
<div class="modal-body" id="editproduct" style="display:inline-block">
</div>
<div class="modal-footer" style="display:none;">
</div>
</div>
</div>
</div>
<script type="text/javascript">
function editproduct(){
//alert("ok");
$('#editproductform').modal('show');
$.ajax({
url: 'action.php',
dataType: 'json',
type: 'post',
data: {
route : 'your_route' //this you can post your every data by using comma (,)
},
beforeSend:function(){
$("#editproduct").html('loading');
},
success:function(json){
console.log(json);
if(json.error){
// alert(json['error']);
} else {
$("#editproduct").html(json.editproduct);
}
}
});
}
</script>
</body>
</html>
I have use action.php for your php script. and think it will help
what I want to do is: I have a login system and when the email and password match, on the screen to show a modal that is declared in the same file.
For some reason it is not working. The php code works.
Part of php code:
if(password_verify($upass, $row['password']))
{
/*$_SESSION['userSession'] = $row['id'];*/
echo "<script>document.getElementById('Modal').showModal();</script>";
}
else
{
$msg = "<div><center>Ati gresit email-ul sau parola!</center><br></div>";
}
The modat inside the html tag:
<div id="Modal" class="modal fade" data-toggle="modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 id="myModalLabel" style="text-align: center;">You have been succesfully registered !</h3>
</div>
<div class="modal-footer">
<button class="btn center-block" data-dismiss="modal">Button</button>
</div>
</div>
</div>
</div>
I have table with names, when I am clicking names I need to open modal and put the name I clicked there. How I can do it? Thanks in advance
report.php
button:
<a href='#ReportModal' data-id='1' data-toggle='modal'>Open</a></td>
modal:
<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false">
<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">asd</h4>
</div>
<div class="modal-body">
//HOW TO PRINT HERE?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
script
<script>
$(document).ready(function() {
$(document).on("click",".get-data"function(){
var val = $(this).attr("data-id");
$.ajax({
url: "../dist/scripts/report.userinfo.php",
type: "POST",
dataType: "HTML",
async: false,
success: function(data) {
$('.modal-body').html(data);
}
});
});
});
</script>
report.userinfo.php
<?php
include($_SERVER['DOCUMENT_ROOT']."/dist/config.php");
$id = $_POST['id'];
$query = $db->query ("select Name from _reports where ID = '$id' ") or die($db->error());
$rows= $query->fetch_array();
echo $rows['Name'];
?>
You're almost there, now all you need is to execute the code assigned to elements with class get-data - to do achieve this, you can add the class to your anchor.
$(document).ready(function() {
$("#ReportModal").dialog();
$(document).on("click", ".get-data", function() {
var val = $(this).attr("data-id");
// for the sake of testing we assume your AJAX call works
// and then you can remove the following line and handle it
// in the success handler as shown in the comment below
$('.modal-body').html("You clicked: " + val);
/*
$.ajax({
url: "../dist/scripts/report.userinfo.php",
type: "POST",
dataType: "HTML",
async: false,
success: function(data) {
$('.modal-body').html(data);
}
});*/
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Open
<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false">
<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">asd</h4>
</div>
<div class="modal-body">
//HOW TO PRINT HERE?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I am trying to .load() a bootstrap modal in my page and show it immediately. Below is the code I have written (which isn't working as the modal opens but can then never be closed)!
Basically I am trying to .load() a list of players in a modal when you click on a team name (with the class .team), I've tried various ways of calling $($this).empty() with no success.
Here is my function:
$(function () {
$('.team').on('click', function () {
var target = $(this).data('target');
$('#results-modals').load('/team-players.html ' + target, function (response, status, xhr) {
if (status === "success") {
$(target).modal({ show: true });
}
});
});
});
Here is the html anchor and example modal:
<a class='team' data-toggle='modal' data-target='#20'>Real Madrid</a>
Data held in external file team-players.html:
<div id='20' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<p>Player 1: Ronaldo</p>
</div>
</div>
</div>
$(function(){
var url = "url of the modal window content";
$('.my-modal-cont').load(url,function(result){
$('#myModal').modal({show:true});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Modal Window Container -->
<div class="my-modal-base">
<div class="my-modal-cont"></div>
</div>
<!-- Modal Window content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Instead of $($this).modal({ show: true }); try $(this).modal('show');
To hide the modal, you can use $(this).modal('hide');
You can do $(this).modal("toggle") if it open it will close and vice versa.
jQuery .load() bootstrap modal and show
for show $(#ID).modal('show');
for hide $(#ID).modal('hide');
I'm trying to use a bootstrap 3.0 modal to load external html file into a modal using jQuery Ajax loader, however it's not shown on first call but works on subsequent calls.
<a data-toggle="modal" data-target="#myModal" href="#myModal" id="myModal" aria-hidden="true">Department</a>
<div class="contianer">
<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">
<img src="img/logo.png" width="150" alt="SmartAdmin">
</h4>
</div>
<div class="modal-body no-padding">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#myModal').click(function(e){
e.preventDefault();
$.ajax({
type: "GET",
url: "?AId=DEPT_ADDUPDATE",
data: { },
success: function(data){
$('.modal-body').html(data);
}
});
});
</script>
Just add:
success: function(data){
$('.modal-body').html(data);
$('#myModal').modal("show");
}