The modal shows up just fine when clicking it to open, and the close buttons register that my mouse is hovering over them, but when clicked nothing happens and the modal remains open.
Has anyone encountered/fixed this problem before? All I've seen on here is to add "data-bs-dismiss" but that hasn't made a difference in the modal. I'm new to bootstrap so any and all help would be much appreciated! Code is below, link to full code here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name= "viewport" content ="width=device-width, initial-scale=1">
<title>Pokedex</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="./CSS/styles.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/scripts.js" defer></script>
</head>
<body>
<div class="pokedex">
<h1 class="pokemon-header">Pokedex</h1>
<ul class="pokemon-list list-group"></ul></div>
<div class="modal" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modal-container" aria-modal="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"></h2>
<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>
</div>
</div>
</div>
</div>
<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://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/promise-polyfill.js"></script>
<script src="js/fetch-polyfill.js"></script>
</body>
</html>
There are a couple of issues.
Let's start with the way the orange poke-buttons are created.
function addListItem(pokemon) {
let listItem = $('<li class="list-group-item"></li>');
let button = $('<button class="pokemon-button btn btn-warning" data target="#modal-container" data-toggle="modal">' + pokemon.name + '</button>');
listItem.append(button);
pokemonListElement.append(listItem);
button.on('click', function(){
showDetails(pokemon);
});
}
This seems to be fine... But:
let button = $('<button class="pokemon-button btn btn-warning" data target="#modal-container" data-toggle="modal">' + pokemon.name + '</button>');
Take a look at data target="#modal-container . There's a hyphen missing, and instead of this
data target="#modal-container"
it should look like this:
data-target="#modal-container"
Next, there's no need to have this line in your showDetailsModal(pokemon) function:
modalContainer.classList.add('show');
The data-target and data-toggle will cover that part for you.
Finally, your CSS seems to be putting the modal's backdrop on top of the modal. Change this:
#modal-container {
...
z-index: 999;
...
}
to something else (for example, 1051, or you can delete it, and let Bootstrap handle it for you), since the backdrop has a z-index of 1040.
I was able to fix the behavior in the JSFiddle by replacing the following two lines in the showDetailsModal function:
let modalContainer = document.querySelector('#modal-container');
modalContainer.classList.add('is-visible');
with this line:
$('#modal-container').modal('show');
that is one of the methods provided in Bootstrap 4.3 per:
the Bootstrap Modal documentation
Also, it's necessary to add the data-backdrop="false" attribute to your modal-container div in order to maintain the current style/behavior.
This may not be the best solution - I am not sure why your code doesn't work, it seems reasonable to me, but I think it's a good idea to use the default methods provided by the library as other methods (like the close function) may be expecting them and fail to work if you're using an improvised method.
Related
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 6 years ago.
Hello this is what i want to do. I want to show the alert box after the user click the link. My link is directed to another php page but it will come back again to the page where the link is found. How can i achieve this? Can someone give me ideas on how to do it?
this is what i tried but not working.
<?php
function fsa() {
echo '<div class="alert alert-success alert-dismissable" id="success-alert">';
echo '<strong>Successfully posted!</strong>';
echo '</div>';
}
<a class='btn btn-info left-margin' href="dbf-import.php" onclick="fsa()">Import Database</a>
This is an example to show the dissmissable alert box when clicking on a button.
$(document).ready(function() {
$('.activater').click(function() {
$('.alert').show()
})
});
.alert {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<h2>Dismissal Alert Messages</h2>
<button class="activater">Send Message</button>
<a class="activater">SHOW MESSAGE</a>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Success! message sent successfully.
</div>
</div>
</body>
You can achieve it through Bootstrap modal instead of alert box. You can design it as according to your need.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
click on this link :
<!-- Trigger the modal with a button -->
<span data-toggle="modal" data-target="#myModal">www.google.com</span>
<!-- 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>Alert Box. Click 'OK' to go to www.google.com</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onClick="document.location.href='www.google.com'">Go</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
PHP is used to generate the HTML and JS. You can have both in a PHP file but you need to see the difference between PHP and JS. The function you've called fsa() is a JS function because it will run client side (on the client machine and after page has been loaded). The onclick param in the HTML tag needs to have a JS function hooked. This way when you click on your <a> tag, fsa() will be fired and the box will show up on the page.
// this is JS, you need <script> tags !!!
<script>
function fsa() {
// define a new variable
var box = '';
// add the HTML inside the JS variable
box += '<div class="alert alert-success alert-dismissable" id="success-alert">';
box += '<strong>Successfully posted!</strong>';
box += '</div>';
// append the HTML contained inside box to the body
document.querySelector('body').innerHTML += box;
}
</script>
<a class='btn btn-info left-margin' onclick="fsa()">Import Database</a>
If you wish to save the data without reloading the client's page, you may want to use AJAX
First of all, like #Iceman said: You are trying to run a javascript function in php, so start by deleting all that. If you just want the user to get an alertbox when clicking on a link, you can simply add
<script> function fsa(){
alert("Your alert message");
}
</script>
Also, if you don't want the person to leave the side, just put href='#', that should take care of it.
Try this
<script type="text/javascript">
function Alert() {
var answer = confirm ("Successfully posted!Please click on OK to continue.")
if (answer)
window.location="http://www.yoursite.com";
}
</script>
click me
I'm working on a solution that displays a list of thumbnails that are medical images. We have a requirement that states if a user clicks a thumbnail a Bootstrap modal should open that display the image (jpg, png or dicom) using the cornerstone.js library.
Using cornerstone seems pretty straightforward. I setup a quick plunker here.
Here's the code for the working plunk:
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>This works just fine...</h1>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
</html>
I can't seem to figure out why the images are not loading when I use the same code in a Bootstrap modal. The plunk that I'm trying to get working is here.
Here's the code for the broken plunk:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="cornerstone.js"></script>
<script src="exampleImageIdLoader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var imageId = 'example://1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</head>
<body>
<div class="container">
<h1>When this modal is opened the canvas looks like it's drawn at 0px x 0px...</h1>
<br />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" 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">
<div id="dicomImage" style="width:512px;height:512px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
After hours or trying to figure it out I figured I would see if anyone out there has any ideas. It looks like the plunk with the modal is drawing the canvas at 0x0 pixels...
Any thoughts or help would be GREATLY appreciated. Thanks all.
Update 6/26
I may have found a potential workaround, but it's not as clean as I would like it to be. I also haven't tested it by playing a series of CT images.
My thoughts are to use the working solution from the first plunk and to call .hide() on #dicomImage on document.ready. Then, when a user clicks a thumbnail, I will use:
$(".modal-body").appendTO("#dicomImage);
Not the cleanest solution, but it could work...
I am trying to make a simplistic HTML editor for part of my website without things like Ace or TinyMCE. The problem is that when I'm using local storage, the save function appears to work, but the view function is not changing the notes to the saved notes.
I made a JSFiddle for all of you, at this URL.
Here is my HTML code:
<html>
<head>
<!-- Begin Section 1: Metas -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<!-- End Section 1: Metas -->
<!-- Begin Section 2: Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.1.3/nprogress.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.mxpnl.com/libs/mixpanel-2.2.min.js" type="text/javascript"></script>
<script src="https://secure.quantserve.com/quant.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ladda-bootstrap/0.1.0/ladda.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ladda-bootstrap/0.1.0/spin.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js" type="text/javascript"></script>
<script src="scripts/app/app.js" type="text/javascript"></script>
<!-- End Section 2: Scripts -->
<!-- Begin Section 3: Stylesheets and Links -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.1.3/nprogress.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Pacifico|Open+Sans|Roboto|Roboto+Slab" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ladda-bootstrap/0.1.0/ladda.min.css" rel="stylesheet" type="text/css">
<link href="stylesheets/app/app.css" rel="stylesheet" type="text/css">
<!-- End Section 3: Stylesheets and Links -->
<!-- Start Section 4: Required Elements -->
<title>Superpad Editor</title>
<!-- End Section 4: Required Elements -->
</head>
<body>
<div class="container animated bounce">
<div class="errors"></div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-centered"><span class="brand-logo">Superpad</span></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="btn-group">
<button type="button" class="btn btn-primary" id="save">Save Notes</button>
<button type="button" class="btn btn-success" id="view">View Saved Notes</button>
</div>
<div contenteditable class="content-editable normal editor"></div>
</div>
</body>
</html>
Here is my JavaScript (it uses jQuery):
NProgress.start();
mixpanel.init("<CENSORED FOR SECURITY>");
mixpanel.track("Page Loads");
NProgress.done();
$(document).ready(function(){
if (Modernizr.localstorage) {
console.log("L.S.W.");
} else {
$(".errors").append("<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×<\/span><span class="sr-only">Close<\/span><\/button><strong>Oh snap!<\/strong> Local Storage doesn't work on your browser. Saving won't work, so you might want to keep this open if you want to keep your notes.<\/div>");
NProgress.done();
};
$("#save").click(function() {
localStorage["note"] = JSON.stringify($(".editor").html());
});
$("#view").click(function() {
if (localStorage["note"] != null) {
var contentsOfOldDiv = JSON.parse(localStorage["note"]);
$(".editor").
$("div.fifth").replaceWith(contentsOfOldDiv);
} else {
$(".errors").append("<div class=alert alert-info alert-dismissible> role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×<\/span><span class="sr-only">Close<\/span><\/button><strong>Heads up!<\/strong> No save was detected. Did you save before?<\/div>");
};
});
});
So what am I doing wrong (I got the JSON parsing idea from another Stack Overflow subject!)?
You have several syntax issues. For example the lines below:
$(".errors").append("<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×<\/span><span class="sr-only">Close<\/span><\/button><strong>Oh snap!<\/strong> Local Storage doesn't work on your browser. Saving won't work, so you might want to keep this open if you want to keep your notes.<\/div>");
and
$(".errors").append("<div class=alert alert-info alert-dismissible> role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×<\/span><span class="sr-only">Close<\/span><\/button><strong>Heads up!<\/strong> No save was detected. Did you save before?<\/div>");
You need to escape the " character or use a single quote. That might not solve your issue, but it's a start. Your code is failing when execution reaches that line, and it can't continue, which might explain why you aren't getting the expected result.
Try using your browser developer tools to find any errors in your code. This page has some information on finding and using the dev tools in your browser. The error in the JSFiddle is shown as:
Uncaught SyntaxError: Unexpected identifier
If you fix the quotation issues, you then get the error:
Uncaught ReferenceError: mixpanel is not defined
Keep going through the errors in your console and see if you can narrow down the issue that way.
I'm working on a page with two Bootstrap 3 modals in Chrome. Everything appears fine until you leave the developer console open and launch one of the modals. You can repeat the issue with this jsfiddle, again with the latest Chrome, or create an html page with the below code.
http://jsfiddle.net/ow3n/22ENG/
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function launchReportModal(){
$('#reportModal').modal();
}
function launchShareModal(){
$('#shareModal').modal();
}
</script>
</head>
<body>
<a href='#reportModal' onclick='launchReportModal()' class='report_link' data-toggle='modal' data-target='#reportModal'>report</a>
<a href='#shareModal' onclick='launchShareModal()' class='report_link' data-toggle='modal' data-target='#shareModal'>share</a>
<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Report <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Share <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
</body>
</html>
Edit: Using jQuery selectors to launch the modal in the html fixes the issue, but you can still see the problem in jsfiddle regardless.
$('#launchReportModal').on('click', function(){
$('#reportModal').modal();
});
$('#launchShareModal').on('click', function(){
$('#shareModal').modal();
});
<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>
<a href='#' id='launchShareModal' data-toggle='modal' data-target='#shareModal'>share</a>
You are trying to activate the modals automatically and activate them manually at the same time! If you read the docs :
Activate a modal without writing JavaScript. Set data-toggle="modal"
on a controller element, like a button, along with a
data-target="#foo" or href="#foo" to target a specific modal to
toggle.
You have both
<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>
and
$('#launchReportModal').on('click', function(){
$('#reportModal').modal();
});
The error is triggered like this :
$.fn.modal (_relatedTarget)
Modal.toggle (_relatedTarget)
Modal.hide (_relatedTarget)
_relatedTarget is considered as an event in the code :
Modal.prototype.hide = function (e) {
if (e) e.preventDefault()
-> Uncaught TypeError: Object http://fiddle.jshell.net/22ENG/2/show/# has no method 'preventDefault'
But _relatedTarget is not an event, it is an element. Appearently data-target has higher rank than your $(element).modal() code.
Solution : Just skip your javascript activation of the modals -> http://jsfiddle.net/QFyv9/ - forked jsFiddle using a unminified version of 3.1.1 bootstrap.js (so I could track down the problem)
I have updated the jsfiddle demo:
http://jsfiddle.net/22ENG/11/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
and upgraded bootstrap from 3.1.1 to 3.2.0.
The error is gone, and it toggles twice, as coded.
I have a bootstrap modal w/ a colorpicker. When I select to change the color, you can't see the full pallette unless you scroll down.
As a test, I put a jqueryui datepicker in the modal and the full datepicker shows when you click it. How do I get the same functionality w/ the colorpicker? I tried changing the z-index of the colorpicker, but that didn't seem to do anything.
(Note: I don't want this, where the height of the modal changes)
Here's my fiddle and code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link href="http://evoluteur.github.com/colorpicker/css/evol.colorpicker.css" rel="stylesheet" />
<script src="http://evoluteur.github.com/colorpicker/js/evol.colorpicker.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#color_picker").colorpicker();
});
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<!-- Button to trigger modal -->
Launch demo modal
<!-- 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>Date: <input type="text" id="datepicker" /></p>
<input id="color_picker" value="#92cddc"/>
</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>
</body>
</html>
You can set the overflow-y property of the modal body do visible:
#myModal .modal-body {
overflow-y: visible;
}
Edit:
If your content doesn't fit the dialog, you will have to change the height or max-height properties to fit.
you can add an event on click to the input that opens the color selector like this
$(document).ready( function (){
$('#color_picker').click(function (){
$('.modal-body').animate({minHeight: '300px'});
});
});
and then on click on the color box or something animate height back to its original quantity
hope it helped, bye.
This is a workaround bandage solution only. You can modify the following functions in evol.colorpicker.js source code. Perhaps, you can try converting it a prototype or extend function without changing the source code.
_create: function() {
..............................
// change the following code to pass the evt to show palette
if(showOn==='both' || showOn==='button'){
e.next().on('click', function(evt){
evt.stopPropagation();
that.showPalette(evt);
});
}
}
}
....................
showPalette: function (e) {
if(this._enabled){
this._active=true;
$('.colorPicker').not('.'+this._id).colorpicker('hidePalette');
if(this._palette===null){
this._palette = $('#YOUR_DIALOG_DIV_ID')
.after(this._paletteHTML()).next()
.css({ top: e.clientY + 'px', left: e.clientX + 'px', position: 'absolute' })
.on('click',function(evt){
evt.stopPropagation();
});
this._bindColors();
var that=this;
if(this._isPopup){
$(document.body).on('click.'+that._id, function(evt){
if(evt.target!=that.element.get(0)){
that.hidePalette();
}
}).on('keyup.'+that._id, function(evt){
if(evt.keyCode===27){
that.hidePalette();
}
});
}
}
}
return this;
},