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>
Related
I have two models and two buttons. Each button triggers 1 model, and the buttons hidden. I want to trigger the functions using jQuery, like $('#appbutton').click().
When triggering appmodel, dbmodel is also trigged and they overlap one another.
<button type="button" data-toggle="modal" data-target="#appmodel" hidden="hidden" id="appbutton">Extra large modal</button>
<button type="button" data-toggle="modal" data-target="#dbmodel" hidden="hidden" dbbutton">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" role="dialog" id="appmodel">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<h4 class="display-4">APP Display</h4>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" role="dialog" id="dbmodel">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<h4 class="display-4">DB Display</h4>
</div>
</div>
</div>
I removed hidden and data-target from html so buttons can be visible. and we can try writing click operation on Button to show modal via javascript.
HTML
<button type="button" data-toggle="modal" id="appbutton">Extra large modal</button>
<button type="button" data-toggle="modal" id="dbbutton">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" role="dialog" id="appmodel">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<h4 class="display-4">APP Display</h4>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" role="dialog" id="dbmodel">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<h4 class="display-4">DB Display</h4>
</div>
</div>
</div>
JS
$("#appbutton").click(function(){
$("#appmodel").modal('show')
})
$("#dbbutton").click(function(){
$("#dbmodel").modal('show')
})
Here is test for it https://jsfiddle.net/cb1asyne/
Now you can hide your buttons and apply a click trigger on buttons like
Based on some operation trigger Below
$("appbutton").trigger("click")
$("dbbutton").trigger("click")
Hope this will help you, let me know for more clarification.
You can toggle visibility of either one using the following code:
const appModel = document.getElementById("appmodel");
const dbModel = document.getElementById("dbmodel");
function setAppModelVisible() {
appModel.style.visibility = "visible";
dbModel.style.visibility = "hidden";
}
function setDbModelVisible() {
dbModel.style.visibility = "visible";
appModel.style.visibility = "hidden";
}
<button type="button" data-toggle="modal" data-target="#appmodel" id="appbutton" onclick="setAppModelVisible()">Extra large modal</button>
<button type="button" data-toggle="modal" data-target="#dbmodel" id="dbbutton" onclick="setDbModelVisible()">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" role="dialog" id="appmodel">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<h4 class="display-4">APP Display</h4>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" role="dialog" id="dbmodel">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<h4 class="display-4">DB Display</h4>
</div>
</div>
</div>
HTML :
<div class="container">
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
and
<input type="button" class="btn btn-success" id="submit2" value="Finish Recording">
What I am aiming to do is when the button is clicked, it redirects to another page, and when the redirected page is loaded, the modal should appear in the new page.
I know I can do all of this easily with multiple buttons but that's not what I'm looking for, I have even tried a sleep function which didn't work.
JS :
$('#submit2').on('click', function (e) {
location.href = "bot.net";
$('#myModal2').modal('show');
});
Any idea how to do this?
Make the modal on the page you want to display
<div class="container">
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
From the first page where the form submission is happening
JS :
$('#myForm').on('click', function (e) {
location.href = "bot.net?showModel=1";
});
On the bot.net page on document ready check for the GET element and store it in another variable
$(document).ready(function(){
if(showModel == 1){
$('#myModal2').modal('show');
}
})
I have following modal dialog coding,but when i click [X],the dialog doesn't closed. I invoke the dialog from button and the JavaScript function as follow;
$('#apply_Compensation_Leave').show();
Modal code
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" 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"><li class="fa fa-times"/></button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Did i miss anything?
Adding Javascript file..all javascript functions in seperate .js file.
EmpcompensationAdapter.method('getActionButtonsHtml', function(id,data) {
var html = "";
html = '<div style="width:80px;"><img class="tableActionButton" src="BASE_URL/apply.png" style="cursor:pointer;" rel="tooltip" title="Apply Leave" onclick="modJs.applyleaves();return false;"></img></div>';
return html;
});
EmpcompensationAdapter.method('applyleaves', function() {
$('#apply_Compensation_Leave').show();
});
EmpcompensationAdapter.method('showLeaveView', function() {
$('#apply_Compensation_Leave').hide();
});
When i click Back button, by calling the function showLeaveView();
Apart from adding $('#apply_Compensation_Leave').modal('show');, you need to change your HTML also. <li> tag should not be put without <ul>. It's not valid markup at all. Try putting × in your button HTML.
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" 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>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Here is a Demo
Or you can provide valid markup like this <ul><li class="fa fa-times"></li></ul>
Here is a Demo with the valid markup.
The bootstrap Modal is invoked by $('#apply_Compensation_Leave').modal('show');
Try this demo.
You are opening your modal using JS.
You can use this.But this has wrong markup as #Alorika Mentioned
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" 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>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
JavaScript
$('#apply_Compensation_Leave').show();
Try this layout :
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<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"> <center>Title here </center> </h4>
</div>
<div class="modal-body">
...Body here...
</div>
<div class="modal-footer">
<button type="button" id="Okbtn" class="btn btn-danger" data-dismiss="modal"> CANCEL</button>
</div>
</div>
</div>
</div>
In rails 4, I am using bootstrap plugin. When I am using modal feature there is close event issue which I need to solve. When modal opens, it should get close when I click on 'x' icon or 'Esc' button otherwise it should be open always. Right now when I click on the screen which excludes the modal form area it will get close.
In main.erb,
<div class="modal fade" id="main-lightbox-container" tabindex="-1" role="dialog" aria-labelledby="main-lightbox-container" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
In form.js.erb,
var content = "<%= escape_javascript(render(:partial=>"form", :locals=>{:user=>#user})) %>";
var container = $('#main-lightbox-container');
container.find('.modal-content').html(content);
container.modal({});
Here I am loading modal form via ajax request. How can I fix this on-screen click issue? Please help me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>
<div data-toggle="modal" data-target="#modalid">Open</div>
<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body" style="background-color: #F0F0F0">
Content
</div>
</div>
</div>
<div id="myModal" data-keyboard="false" data-backdrop="static">
just add data-keyboard="False" and data-backdrop="static" it works for me.
while($row = mysqli_fetch_array($result_from_query)){
<a class="modal-trigger" href="#basicModal" data-toggle="modal" data-target="#basicModal" data-id="<?php echo $row['invoice_no']; ?>"><?php echo $row['invoice_no']; ?>
</a>
}
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Invoice Item</h4>
</div>
<div class="modal-body">
<input type="text" name="invoice" id="invoice" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).on("click", ".modal-trigger", function () {
var invoiceNO = $(this).data('id');
$(".modal-body #invoice").val( invoiceNO );
});
</script>
so i have this code that send data to modal and put it in a <input name="invoice" />
now my question is i want to put it in a php variable to use it in a query inside the #basicModal div.
something like this
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Invoice Item</h4>
</div>
<div class="modal-body">
<?php
$result = mysqli_query($conn, 'SELECT item from invoice_tab where invoice no = ' $invoice_no);
$data = mysqli_fetch_assoc($result);
echo $data['item'];
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
but i have no idea on how to put the data in a php variable...can u pls guys help me in this...tnx
Why don't you use your:
$row['invoice_no'];
in your first example to fill the SQL query in the modal?