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>
Related
I have integrated the bot in the website but the issue is, when the user gives the answer and press the enter then I should call the API. So, how to find that user presses the enter?
<div id="myModal1" 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 chat-box">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Bot</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal1()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe
allow="microphone;"
width="350"
height="430"
src="">
</iframe>
</iframe>
</div>
</div>
</div>
</div>
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 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.
So if I have two different Models the content within the second model doesn;t show up instead it's the content of the first model. How can i get two individual Models with different contents
EXAMPLE Model 1:
<!-- Button to trigger modal -->
modal 1
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
EXAMPLE MODEL 2:
<!-- Button to trigger modal -->
modal 2
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">this is different</h3>
</div>
<div class="modal-body">
<p>this ones different but yet when you click it the content of the first Model appears.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">diffent</button>
<button class="btn btn-danger">Quit</button>
</div>
</div>
my goal is for when I click on the second modal button for the content to be what is in the second modal and not whats in the first Modal again. I want them both to be different.
Use 2 different modal id's....
<!-- Button to trigger modal -->
modal 1
<!-- Modal -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
<!-- Button to trigger modal -->
modal 2
<!-- Modal -->
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
Demo on Bootply: http://bootply.com/80525