When the Modal appears there is a select list that is anchored to the top left of the page. Eventually that list will be used to provide navigation options; however I am unable to select an option in the list. I have tried to set the z-index higher than the modal but nothing seems to work. Hope someone can shed some light on a solution? Thanks!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tool</title>
<!-- Bootstrap v2.3.2 -->
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<button type="button" class="onl btn btn-success btn_online">Submit</button>
<!-- popup message -->
<div id="popup_message" 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 class="_c1g">Description</h3>
</div>
<div class="well msg" id="msg" style="max-height:400px;overflow:auto;"></div>
<div class="modal-footer">
<button class="btn _c1e" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
<script src="script/jquery-1.8.3.js" type="text/javascript"></script>
<!--Bootstrap v3.0.0-->
<script src="script/bootstrap.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$(document).on('click', '.btn_online', function (e) {
$('#popup_message').modal('show');
$("body").append("<select id='my_redirect' style='top:20px;left:20px;z-index:1051;position:absolute;'><option value='' >Select...</option><option value='Page1' >Page1</option><option value='Page2' >Page2</option></select>")
});
});
</script>
To resolve the issue of a modal blocking all elements beneath it when closed you can also add the following block:
<style>
/*Modal blocking caused issues with selecting objects*/
.modal { display:none; }
</style>
Twitter bootstrap multiple modal error
My assumptions were correct. The modal enforces focus on itself. The above has the solution created by #SmartLove. Basically place the following after the bootstrap scripts..
$.fn.modal.Constructor.prototype.enforceFocus = function () {};
Now the select element works as expected! Woo Hoo!
Related
I have a Bootstrap 5 modal, which is used to download a file by clicking a button. This works fine, but I want the modal to be hidden after clicking the download button, and this is where I'm struggling.
I am attempting to use jQuery to do this. I know that the jQuery library is successfully imported and that my function is being executed because I can display an alert box within the same function, but I can't get the modal to hide.
The full code snippet is pasted below with the script section at the bottom. The key line of code that I am trying to use to dismiss the modal is: -
$('#downloadConfirm1').modal({show : false});
I have also tried the following: -
$('.modal.in').modal('hide');
But neither has worked. I am extremely grateful to anyone who takes the time to read my post. Any suggestions most welcome!
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Java Documentum Services</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<a class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
data-bs-target="#downloadConfirm1"
role="button">Download
</a>
<div class="modal fade" id="downloadConfirm1" tabindex="-1" aria-labelledby="downloadConfirm1"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="downloadModalLabel">Confirm download</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Download Docx_test_file.docx?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<a href="files/dummy.pdf" download="dummy.pdf">
<button type="button" id="download_button1">Download</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$('#download_button1').click(function() {
alert("Hello! I am an alert box!!");
$('#downloadConfirm1').modal({show : false});
});
</script>
</html>
Bootstrap 5 modal dropped jQuery so that is why you cannot hide the modal with jQuery. You should save your modal instance in the moment of initialization.
Afterwards you can use this code to hide your modal.
Ref: Bootstrap 5 Modal#hide
var modalInstance = new bootstrap.Modal(document.getElementById('downloadConfirm1'));
var modal = document.getElementById('downloadConfirm1');
modalInstance.hide(modal);
var myModalEl = document.querySelector('#scheduleMeetingModal');
var myModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
myModal.hide();
I would like to display a text description box when I hover over the button and close it when not hovered. At the moment, when my button is hovered the text box displays, however I need to click off the screen to close it. When I try to use several buttons to show different message boxes, all the modals are opened and I need to click the screen many times to close it. How can I show the message box on hover and undisplay when the mouse is not hovered over. How can this be achieve for multiple buttons?
Below is what i have so far:
$(document).ready(function () {
"use strict";
$("#test1").hover(
function () {
$('.modal').modal({
show: true
});
},
function () {
$('.modal').modal('hide');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<button class="btn login btn-primary" data-toggle="modal" data-target="#product1" id="test1">Test</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button
</div>
</div>
</div>
First major problem: when bootstrap displays this modal, it overwrites everything on the web page, including the Test button, which makes it out of reach of a mouseOut (the bottom of the modal dialog is over the button )
This is solved by bidding on the order of the display layers by placing a larger z-index css (I put 8000 and this also works only if the element uses a positioning)
As a result, this is no longer a true modal dialog, and the click on the Test button can be triggered, which is contrary to the spirit of using a modal dialog.
the BS4 doc on the subject => https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes
$(document).ready(function () {
"use strict";
$(".BtModals").hover(
function () {
let refID = '#' + $(this).data('modal_id');
$(refID).modal('show');
},
function () {
let refID = '#' + $(this).data('modal_id');
$(refID).modal('hide');
});
});
.BtModals:hover {
position:relative;
z-index: 8000;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<button class="btn login btn-primary BtModals" data-modal_id="Modal-t1" data-toggle="modal" data-target="#product1" >Test 1</button>
<button class="btn login btn-primary BtModals" data-modal_id="Modal-t2" data-toggle="modal" data-target="#product1" >Test 2</button>
<div id="Modal-t1" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button Test 1
</div>
</div>
</div>
<div id="Modal-t2" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
This text box shown when mouse hover over the button Test 2
</div>
</div>
</div>
New Answer:
"hover" method accepts second argument as handlerOut.
So you can do something like this:
$(document).ready(function () {
"use strict";
$("#test1").hover(
function () {
$('.modal').modal({
show: true
});
},
function () {
$('.modal').modal('hide');
});
});
Old Answer:
Since you use bootstrap, for such cases, you can use popover.
https://getbootstrap.com/docs/3.3/javascript/#popovers-examples
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
You can achieve it with CSS by setting a data attribute with the 'hover text' in the HTML for each button. If there are too many buttons to do it manually, or if they change dynamically, you can loop over them in JS and use .setAttribute("data-tip", "tip_content").
Here is an example of the HMTL and CSS:
<button data-tip="Show this on hover">My botton</button>
button:hover:after {
content: attr(data-tip);
color: red;
display: block;
position: absolute;
top: 20%;
}
Here is the codepen link if you want to see it live: https://codepen.io/CPC464/pen/KEbJJo
I'm trying to create a pop up and set cookies expire in 30 sec and displays a popup when the page loads just once . the problem is my popup it pop ups but my cookies does not work I do not know whats wrong with my code i tired few things but it did not work also i watched few videos.I'm working on this since this morning if you could help me with you are making my day.any help appreciate it in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Cookie JS for Modal -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div class="container-fluid">
<div id="myModal" class="modal fade">
<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>REGISTER FOR FALL SESSION</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-6">
<img src="gym.png" alt="gym_promo" style="width:304px;">
</div>
<div class="col-xs-12 col-sm-6">
<h3> Reserve Your Spot Today </h3>
<p> EMAIL : PLAYATGYM#GMAIL.COM </p>
<p>OR CALL : 514-795-4266 </p>
<script>createCookie();</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function createCookie(name, value) {
var date = new Date();
date.setTime(date.getTime()+(30*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = name+"="+value+expires+"; path=/";
}
</script>
</body>
</html>
When you call "createCookie()" you don't pass parameters, and so name and value are undefined, setting the cookie incorrectly.
Also, the script you added to create the cookie will be called when the page loads. Even if the modal isn't shown, it is still loaded, and so the createCookie() function is called. If you want it to be called when the popup pops up, add the line to the jquery you have above:
$(document).ready(function(){
$("#myModal").modal('show');
createCookie("name of cookie","value of cookie");
});
The scenario is, a hyperlink below is toggling a modal as well as creating two buttons inside modal(using javascript having a dynamic id--inspect for button id).
The requirement is on the click of verifybtn0, the rejectbtn0 should disable and viceversa.
In plunker attached, alert is not reached(mentioned in plunker).
Here is, plunker link http://plnkr.co/edit/KgB8yPtcmxYJzQCWB3PJ?p=preview
For more understanding, have a look at plunker.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<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>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src="script.js"></script>
</head>
<body>
<div id="annexureModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="width: 40%;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="closebtn" >×</button>
<h4 class="modal-title">Annexure List</h4>
</div>
<div class="modal-body text-center" style="background-color: #fff;height: 500px;width:100px;">
<div class="col-xs-12 rmpm">
<table class="table" id="tableAnnexure" style="height:430px;">
<tbody>
<tr>
<td colspan= "2" style="">
<div class="" id="verifybtndiv" style='width:auto;float:left;background:red; '></div>
<div class="" id="rejectbtndiv" style='width:auto;float:left;background:green; '></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Annexure
<script type="text/javascript">
function createVerifyRejectbtn(id){
alert("annexureLink clicked");
var html= "";
html = "<button type='button' class='btn btn-success' id='verifybtn"+id+" ' onclick='disablebtn(this.id)' >Verify</button>";
$("#verifybtndiv").html(html);
html = "<button type='button' class='btn btn-warning' id='rejectbtn"+id+" ' onclick='disablebtn(this.id)' >Reject</button>";
$("#rejectbtndiv").html(html);
}
function disablebtn(id){
var idd = id;
// alert(typeof(idd));
alert(idd);
if(idd === "verifybtn0"){
alert("verifybtn0"); /* here alert is not reaching*/
document.getElementById(id).disabled = false;
document.getElementById("rejectbtn0").disabled = true;
}
else if(idd ==="rejectbtn0"){
alert("rejectbtn0"); /* here alert is not reaching*/
document.getElementById(id).disabled = false;
document.getElementById("verifybtn0").disabled = true;
}
}
</script>
</body>
</html>
First you need to understand how Javascript and DOM works.
When you load your page, the first thing that loads is DOM ( your HTML content ), then once DOM loads, all the javascript events (like Click, mouseover) are registered.
When you dynamically create HTML elements , the events will not be registered because your DOM has already loaded .
Inorder to rebind the newly inserted elements and events, you have to do Dynamic Binding using Jquery. Look at the below link on how to do it
Event binding on dynamically created elements?
i am new to twitter bootstrap .i am using the bootstrap 3
and this is my html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Samples</title>
<script src="scripts/jquery1.10.2.min.js"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-3.1.1-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" />
<style>
.banner {color:#FF0000;}
</style>
<script>
$(document).ready(function(){
$("#MyModal5").on('hidden.bs.modal',function(){
$("#btnYes").on('click',function(e){
var $myMod = $(this);
var id = $myMod.data('cust-id');
if(id=='y'){
alert("You clicked yes button");
}
});
});
});
</script>
</head>
<body>
<!-- -------------------------------------------------------------------- -->
<div class="modal fade" id="MyModal5">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-title">
<label style="color:#FF6600;">Confirmation</label>
</div>
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>This may cause to make an additional hit to server. Are you sure you want to continue ?</label>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-sm" id="btnYes" data-cust-id="y" data-dismiss="modal">Yes</button>
<button class="btn btn-danger btn-sm" id="btnNo" data-cust-id="n" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- -------------------------------------------------------------------- -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<label>If you want to visit google</label>Click here
</div>
</div>
</div>
</body>
</html>
idea is that i have a link, while i click on that link i need to populate the model.its working,now if i click on the 'yes' button on that modal ,i need an alert, but problem is that alert is not showing when i click on yes button for first time ,but if i again click on that button for second time it is showing,another problem is tht if i clicked on third time alert is showing twise,i dont know the exact reason,i suspect this is because of the on event of jquery.
can any one help me to slove this issue
I believe the issue may stem from your click event bindings being nested. Try removing the outer binding and just register the click event in this way:
$(document).ready(function() {
$("#btnYes").on("click",function(e) {
var $myMod = $(this).closest(".modal"); // Select on closest parent modal
// Now run your required code
});
});
});
Hope this works and helps! Good luck.