I would like to use an add-in like simple-modal or the dialog add-in in the UI kit. However, how do I use these or any other and get a result back. Basically I want the modal to do some AJAX interaction with the server and return the result for the calling code to do some stuff with.
Here is how the confirm window works on simpleModal:
$(document).ready(function () {
$('#confirmDialog input:eq(0)').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
close: false,
overlayId: 'confirmModalOverlay',
containerId: 'confirmModalContainer',
onShow: function (dialog) {
dialog.data.find('.message').append(message);
// if the user clicks "yes"
dialog.data.find('.yes').click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
If your HTML is like the following, and you are trying to avoid bootstrap, then you try it like the following. You can also apply AJAX on this structure since this just like any other part of the HTML of your page. Or you try the same using Bootstrap and your work will be easier. Here is a code, please give it a try. It still can be enhanced and modified:
$("button.try-it").on("click", function() {
$(".modal-container").removeClass("hide");
});
$(".close-btn").on("click", function() {
$(".modal-container").addClass("hide");
});
.modal-container {
position: absolute;
background-color: rgba(35, 35, 35, 0.41);
top: 0;
bottom: 0;
height: 300px;
width: 100%;
}
.modal-body {
width: 100px;
height: 100px;
margin: 0 auto;
background: white;
}
.close-btn {
float: right;
}
.hide {
display: none;
}
.body-container {
position: relative;
box-sizing: border-box;
}
.close-btn {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body-container">
<div class="button">
<button class="try-it">Try It!!</button>
</div>
<div class="modal-container hide">
<div class="modal-body">
<span class="close-btn">x</span>
<p>Here is the content of the modal</p>
<!--You can apply AJAX on this structure since this just like any other part of the HTML of your page-->
<!--Or you can use Bootstrap modal instead of this one.-->
</div>
</div>
</div>
Hope this was helpful.
Here is the link to a fiddle.
Since the modal dialog is on the page, you're free to set any document variable you want. However all of the modal dialog scripts I've seen included a demo using the return value, so it's likely on that page.
(the site is blocked for me otherwise I'd look)
Related
I need to show a Modal in TypeScript. I don't want to use any library(bootstrap,..) to style it, I have to use own less styling for it. what I can use to Create a Modal? it can be a javascript modal that supported by typescript and by all browsers.
I tried to use showModal() like this:
This is my TypeScript Code:
function CreateModal() {
document.getElementById("myDialog").showModal();
}
It gave me this error - showModal is not exists.
even if It works it is not supported in IE and Firefix only works in chrome.
and this is my index.html
<script src="scripts/TypeScripts/Modal.js"></script>
<button onclick="CreateModal()">Show dialog</button>
<dialog id="myDialog">This is a dialog window</dialog>
I tried to use Onclick as well but it says does not existed.
span.onclick = function () {
modal.style.display = "none";
}
I know it's been a few months since this question was asked, but I recently had the same problem and was able to get a solution working.
In the typescript, you can ignore the need for the HTMLDialogElement by casting your dialog to type any.
openMyDialog() {
let myDialog:any = <any>document.getElementById("myDialog");
myDialog.showModal();
}
In your HTML, you just attached this function to the angular (click).
<button (click)="openMyDialog()">Open My Dialog</button>
The same technique can be used for the dialog's show() and close() functions.
If you're up for doing everything manually, you can place a partially transparent grey DIV over everything on the page, then a single DIV on top of it with your dialog. Toggle visibility with JS/CSS, and you're able to style any way you like it.
Here's a quick example, with a significant need for improved styling:
div.greyModal {
opacity: 0.7;
background-color: grey;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.modalContent {
opacity: 1;
position: fixed;
width: 75%;
left: 50%;
margin-left: -37.5%;
height:100px;
background-color: white;
border: solid 4px black;
border-color: black;
}
<div>
This is the web page content. <span style="color:red">This is red text that appears faded when the modalToggle divs are visible</span>
</div>
<div class="greyModal modalToggle">
</div>
<div class="modalContent modalToggle">
This is the content of my modal dialog
</div>
Here is my jQuery code:
(function() {
var overlay = {
init: function() {
$('<div></div>', {
class: 'overlay'
})
.insertAfter('button');
}
};
overlay.init();
})();
I would expect this to put a div under my button however the HTML that is created contains no div:
<body>
<button>Reveal More Info</button>
</body>
Sorry if this is a newbie question, I have just started learning.
The HTML Head:
<head>
<title>jQuery rules</title>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="script.js"></script>
<style>
body {
background: yellow;
}
button {
margin: 100px 0 0 200px;
}
div {
display: none;
width: 600px;
height: 400px;
background-color: white;
border-radius: 40px;
position: absolute;
left: 25%;
top: 30%;
}
</style>
</head>
From jQuery documentation, see e.g., http://api.jquery.com/jQuery/#jQuery-html-attributes:
Blockquote
The name "class" must be quoted in the object since it is a JavaScript reserved word, and "className" cannot be used since it refers to the DOM property, not the attribute.
The problem is you are including the script.js in your header which is executing before the button is added to the dom so the insertAfter() will not be able to find the button to insert the div.
The solution here is to use document ready handler, or to insert the script at the bottom of the body(just before </body>)
//dom ready handler
jQuery(function ($) {
var overlay = {
init: function () {
$('<div></div>', {
'class': 'overlay'
}).insertAfter('button');
}
};
overlay.init();
});
Demo: Fiddle
I'm trying to show a fixed div using the show function of jquery. The show function works, but not when I try to add an effect with jquery ui. I have both jquery and jquery ui linked in an external file via a php include. When I use the inspector in chrome, I can see the blue box of the div I'm trying to show when I click the show button, yet the page remains unchanged.
This is my html:
<link rel="stylesheet" href="js/jquery-ui.min.css">
<script src='js/jquery-2.1.1.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
<div class="twitterbar" id="baremily">
<a class="twitter-timeline" href="https://twitter.com/EmilyPalmaers" data-widget-id="number">Tweets by #EmilyPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="twitterbar" id="barcharlotte">
<a class="twitter-timeline" href="https://twitter.com/CPalmaers" data-widget-id="number">Tweets by #CPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
This is my jquery:
<script>
$(document).ready(function()
{
$("#twitteremily").click(function(e)
{
e.preventDefault();
if( $('#baremily').is(':visible') ) {
// it's visible, do something
$('#baremily').hide("blind");
}
else {
// it's not visible so do something else
if ($('#barcharlotte').is(':visible'))
$('#barcharlotte').hide("blind");
$('#baremily').show("blind");
}
});
$("#twittercharlotte").click(function(e)
{
e.preventDefault();
if( $('#barcharlotte').is(':visible') ) {
// it's visible, do something
$('#barcharlotte').hide("blind");
}
else {
// it's not visible so do something else
if ($('#baremily').is(':visible'))
$('#baremily').hide("blind");
$('#barcharlotte').show("blind");
}
});
}
);
</script>
and this is the css (note, the div I'm trying to show has a class and ID tag:
.twitterbar
{
position: fixed;
display: none;
top: 35%;
left: 50%;
margin-top: -10em;
margin-left: -10em;
z-index: 99999;
height: 20em;
width: 20em;
}
#media (min-width:961px) {
.twitterbar
{
top:50%;
margin-top: -16rem;
margin-left: -16rem;
height: 32rem;
width: 32rem;
}
}
I'm pretty much clueless at the moment, thanks in advance
http://jsfiddle.net/a9dbeo1o/
Recheck your script references.
To make sure jQuery is ready, try:
if ( jQuery.isReady ) {
alert('jQuery is ready');
}
Edit:
Just a note: I also see you have your jquery css file inside your js folder.
Edit 2:
Updated fiddle:
http://jsfiddle.net/a9dbeo1o/2/
So I've been working on this for a while, I've tried many examples found here on stackoverflow, and then starting reading up on js/jquery for most of the day, but am still having trouble with this.
Basically I was able to create a hidden menu item that slides on to screen when clicked, and I was able to change the button used to open in by toggling the class, and send it back.
But after the first time through that process when I try to open it again, it opens and then closes automatically.
I built a jsfiddle, but have done it wrong as it's not working the same as on my site.
fiddle: http://jsfiddle.net/VpnrV/1/
site: http://ericbrockmanwebsites.com/dev4/
code - html:
<div id="dashboard">
<nav id="access">
<div class="open"></div>Here's a bunch of content representing the nav bar.
</nav>
</div> <!-- dashboard -->
css:
#dashboard {
font-size:30px;
float:left;
position: absolute;
right: -653px;
z-index: 100;
}
#access {
display: block;
float: right;
margin: 10px auto 0;
width:730px;
}
.open {
background: #cabd32 url(images/open.png) top left no-repeat;
float:left;
padding:13px 30px 16px;
}
.close {
background: #cabd32 url(images/close.png) top left no-repeat;
float:left;
padding:13px 30px 16px;
}
my laughable js:
$(document).ready(function() {
$('.open').click(function() {
$('#dashboard').animate({ right: '0' });
$(this).toggleClass('close');
$('.close').click(function() {
$('#dashboard').animate({right: '-653'});
}
);
});
Any help is greatly appreciated!
You are actually binding the class .close to multiple callback every time you click the button.
you can try this:
$('.open').bind('click',function(){
$('#dashboard').stop().animate(
{
right: $(this).hasClass('close') ? '-653px' : '-400px'
});
$(this).toggleClass('close');
});
Having stop() infront of animate() will cancel the current animation and do the next animation without queueing multiple animations up.
You can actually do this in one click event. All this does is every time you click open it looks for the close class, if it's there, close the menu, if not open it. Then toggle the close class:
$(document).ready(function () {
$('.open').on("click", function () {
if ($(this).hasClass('close')) {
$('#dashboard').animate({
right: '-653'
});
} else {
$('#dashboard').animate({
right: '0'
});
}
$(this).toggleClass('close');
});
});
I don't know if this is the most effecient but it works for your example. I updated it as well: http://jsfiddle.net/VpnrV/3/
I have a basic function that when no answer is clicked it shows an error message in
the div id "error". this works fine but when i have a background colour and image is shows the style on the div. i'm using jquery and moo tools,
Is there a way to hide this style until the answer is set.
<style type="text/css>
#error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
color: #D8000C;
background-color: #FFBABA;
background-image: url('../images/error.png');
}
</style>
<div id="error"></div>
<script type="text/javascript>
function showAnswerAlert() {
$('error').set('html', '<strong>Please select an answer above.<strong>')
}
function clearErrorBox() {
$('error').set('html','');
}
</script>
Hide the div initially and show in showAnswerAlert or where ever you need
<div id="error" style="display:none"></div>
function showAnswerAlert() {
$('error').set('html', '<strong>Please select an answer above.<strong>');
$('error').show();
}
or hide error div on document ready
$(function(){
$('error').hide();
});
the reason why hide() and show() dont work is because those ase jQuery functions, if you're using mootools, and would like to use "hide()" and "show()" you need to write functions like so:
window.addEvent('domready', function() {
Element.implement({
//implement show
show: function() {
this.setStyle('display','');
},
hide: function() {
this.setStyle('display','none');
}
});
});
or you can do this to show:
$('error').setStyle('display','block');
and this to hide:
$('error').setStyle('display','none');
Sounds like this is a validation on a select item.
Validation can be done in many ways buti suggest you look t HTML5 valiations, this might be all you need:
http://diveintohtml5.info/forms.html