Confirmation Dialog with Link in message? - javascript

Sorry if this is a silly question (I am still new to web development), but is it possible to have a link in a basic confirmation dialog message?
Right now, I have a basic confirmation popup
if (confirm("Bunch of text here"))
...
But a customer wants me to add a link in that confirmation box which would open in a new window. Adding html tags in the message doesn't work since it's a message string.
Any suggestions would be appreciated.
Thanks!

You could make a modal and display it like that, or, even simpler, use bootstrap's built in modal.
HTML:
<div class="button">Click</div>
<div class="overlay">
<div class="modal"></div>
</div>
CSS:
.button {
background-color: #aa0000;
color: #fff;
padding: 5px 40px;
display: inline-block;
cursor: pointer;
}
.overlay {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
height: 100%;
width: 100%;
display: none;
top: 0;
left: 0;
}
.modal {
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
background-color: #fff;
position: fixed;
height: 200px;
width: 200px;
}
JS:
$(function() {
var button = $('.button'),
overlay = $('.overlay'),
message = 'Message text',
modal = $('.modal');
button.on('click', function() {
overlay.css('display', 'block');
modal.html( message + '' + 'link' + '');
});
});
http://jsfiddle.net/HNe95/

That's not possible with the Javascript's confirm function. In order to do that you need a custom modal dialog.
If you use jQuery, you could create one by use one of these: vex, alertify, and apprise to name a few.
If you don't use jQuery, you can create one by applying some CSS and Javascripts for events. You could also follow this guide.

Related

Modal issue with html button updated by javascript

I am using the following javascript code to update my HTML.
document.querySelector(".long-copy").innerHTML = "Once, there was a boy who became bored when he watched over the village sheep <a class=\"word-button\">grazing</a> on the hillside.";
This updates my HTML DOM (this one) dynamically.
<div>
<p class="long-copy"></p>
</div>;
Now, in my code - the word "grazing" is a tag. When someone clicks on this "grazing" button, a modal window should open. BUT this is not working as when I run this javascript code, I get an error "Cannot read property 'addEventListener' of null". Please help.
const btn1OpenModal = document.querySelector(".word-button");
btn1OpenModal.addEventListener("click", openModal);
const openModal = function () {
modal.classList.remove("hidden");
overlay.classList.remove("hidden");
};
CSS added >>
.hidden {
display: none;
}
.word-modal-one {
position: absolute;
top: 56%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background-color: white;
padding: 6rem;
border-radius: 10px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
overflow: auto;
}
.word-modal-one::-webkit-scrollbar {
display: none;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(1px);
z-index: 5;
}
Instead change your <a> tag HTML to this:
var myHTML = "text text more text <a href='javascript:void(0);' onclick='openModal()'>My a element</a> more text text more text";
function openModal() {
//Open that modal
}
I added the javascript:void(0) because without that, some browsers like to use the <a> tag to redirect, because it does signify a link, and that void stops the link from executing a redirect to the same page and lets you carry on with your JS on the same page
The reason why your addEventListener fails is because the script looks for an element that doesn't exist yet, and so you can bypass that by attaching the event listener yourself onto the element

Creating a modal window on page load

I am using the Kube framework (http://imperavi.com/kube/) which includes a modal function. Unfortunately the documentation is kind of sparse or I am too dumb (http://imperavi.com/kube/tools/js-modal/).
They have sample code showing how to launch modals on button clicks, but I am trying to launch it on body load. Can anyone with either experience with Kube or a better understanding of JS/JQuery help me do that? I wan to make sure I can specify settings like width and blur.
I know there are many many modal plugins out there, but I am trying to limit my project to just this one framework.
This will run on window ready. http://jsfiddle.net/418hmnjy/2/. This uses no libraries Just HTML, CSS and JavaScript.
HTML
<div id="modal">
<div class="modalconent">
<h1></h1>
<p>fasfsdfasfsfsdfsdfsdsffsd</p>
<button id="button">Close</button>
</div>
</div>
JavaScript
window.onload = function () {
document.getElementById('button').onclick = function () {
document.getElementById('modal').style.display = "none"
};
};
CSS
#modal {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
height: 100%;
width: 100%;
}
.modalconent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
width: 80%;
padding: 20px;
}

IE requires double click with custom button

I have a script that is dived as:
HTML:
<div id="wrapper">
<div id="container">
<div id="button">Click me!</div>
<form>
<input type="file" />
</form>
</div>
<div id="notice">File is uploaded!</div>
</div>
JavaScript(JQuery 2):
$(document).ready(function () {
$("input").on("change", function () {
$("div#notice").fadeIn();
//$("form").submit(); //If you want it to submit on your site uncomment this
});
});
CSS:
div#wrapper {
background-color: #ccc;
position: absolute;
width: 300px;
height: 200px;
}
div#wrapper > form > input {
color: rgba(0, 0, 0, 0);
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
color: rgba(0, 0, 0, 0);
}
div#container {
width: 200px;
height: 20px;
overflow: hidden;
}
div#button, input {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
div#button {
z-index: 1;
background-color: #AAA;
}
input {
z-index: 2;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
alpha: filter(opacity=0);
font-size: 25px;
color: rgba(0,0,0,0);
filter: alpha(opacity=0);
zoom: 1;
}
div#notice
{
background-color: green;
display: none;
position: absolute;
bottom: 0px;
left: 0px;
}
Note: This issue was there before blur was put to hide the flashing icon in IE.
In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.
The only thing I've tried so far is to .render("click") on the input, but that didn't work.
JSFiddle: http://jsfiddle.net/plowdawg/mk77W/
I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.
<div class="divFileUpload">
<input class="fileUpload" type="file" />
</div>
and css:
.divFileUpload {
background-color: #F60;
border-radius: 5px;
height: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
width: 50%
}
.fileUpload {
cursor: pointer;
font-size: 10000px; /* This is the main part. */
height: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}
To follow up on what SDLion said....
This might be what you see
But really on top of that there is a file upload control that has been made transparent.
Clicking on the browse button brings up the file upload dialog with one click.
In IE You have to double click the text box to the left of it if you want to see the file upload dialog.
Increase the font size of the file input to fill the button image
While #bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.
You will need:
A wrapper div tag
An inner dev tag
Some sort of form input
JQuery (tested on 2.1)
Steps:
Create the "wrapper" div
Create an inner "button " div
Place the form element underneath the inner "button" div
Set the "wrapper" and "inner" divs to the same size
Set overflow:hidden on the wrapper
Create a JQuery script for the "inner" div setting the on click function
In the "inner" function click function call .click() on the input
Seems to work for me in IE 10.
$(document).ready(
function()
{
$("#open_dialog").on("click",function()
{
$("input").click();
});
$("input").on("change",function()
{
alert($("input"));
$("#notice").html("uploading");
});
});
#open_dialog
{
position: relative;
width: 200px;
height: 50px;
color: white;
font-family: "Arial";
font-size: 14pt;
text-align: center;
top: 25px;
margin-top: -.5em;
z-index: 1;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
background: green;
z-index: 0;
}
input
{
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="open_dialog">Click Me</div>
<input type="file" />
</div>
<div id="notice">Nothing to upload</div>
The double click is happening on the text portion of the file upload, like #TravisPessetto stated.
Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.
See here for more details.
I found another more simple solution, just trigger the event "click" on mousedown for this element only:
$("input").mousedown(function() {
$(this).trigger('click');
})
in order to avoid problems on other browsers, apply this solution to IE only:
if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
$("#your_file_input").mousedown(function(event) {
if (event.which == 1) {
$(this).trigger('click');
}
})
}
here's your jfiddle modified, check it on IE 9-10:
http://jsfiddle.net/7Lq3k/
Edit: example modified in order to limit the event handling for left click only
(see: How to distinguish between left and right mouse click with jQuery for details)
I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.
HTML
<!--/* Upload input */-->
<div class="input-file">
Select image
<input type="file" />
</div>
LESS CSS
/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
position: relative;
overflow: hidden;
margin: 10px;
input[type="file"] {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%;
height: 100%;
font-size: 10000px;
}
// For Chrome
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
}

Alert when div height changes

I've been searching all day for this but i can't figure it out myself..
I have a shopping cart that you can add items to. The shoppin cart is in a drop down so you have to click it in order to view it. Therefore, everytime you add an item to the cart i want to display "+1", "+2" and so on, somewhere and when u click on the drop down it would disappear so it can start over counting.
So, i thought that when the div's height changes it could display +1.
But, i don't know enough javascript to do this....
My html:
<div id="button">Button</div>
<div id="chartdropupcontainer">
<div id="chart">
<button>test</button>
<script type="text/javascript">
$("button").click(function () {
$("#testp").hide();
});
$("#chart").bind("resize", function(){
alert("test");
});
</script>
<p id="testp"></p>
</div>
</div>
</div>
My Css:
* {
padding: 0;
margin: 0;
font-family: Helvetica;
color: white;
}
#chartdropupcontainer {
width: 200px;
background-color: red;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
padding: 0 5px 0 5px;
margin-bottom: 47px;
z-index: 998;
}
#chartdropupcontainer h1 {
margin: 5px;
color: black;
cursor: pointer;
}
#chart {
width: 100%;
background-color: black;
height: 400px;
overflow: auto;
}
#button {
background-color: blue;
cursor: pointer;
padding: 10px;
width: 190px;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
z-index: 999;
}
My javascript:
$(document).ready(function() {
$("#button").click(function () {
$("#chartdropupcontainer").slideToggle("slow");
});
});
And here is a link to an online version: http://www.rutgerinc.nl/niels/
Edit: sorry, bit inpolite!
Could anyone please help me with this?
First off, the resize event is when you resize a window so that's why your event is never firing.
http://api.jquery.com/resize/
I think you need to alter the bit of code where the item gets added to the basket. Isn't there more javascript somewhere to add things to the basket in the first place?
An event-driven approach like BGerrissen suggests would be perfect because you can fire one or more independent functions when the user adds something to the cart.
As you are using jQuery, custom events are quite easy. You use trigger to fire the event and then bind to listen for it.
http://api.jquery.com/trigger/

How to create a modal popup using javascript and CSS

Actually, two questions:
How can I create a modal popup with background color of gray?
Also I need to create for a cover background color only to table itself. Not to overall page.
How do I do this using javascript and css?
Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.
<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>
Then, you could leverage jQuery to display it.
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(800);
});
This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden') and show, and if not then fadeOut(800) or similiar.
I use this for the mask that sits on top of the screen
.Mask {
display: none;
width: 100%;
height: 100%;
z-index: 9000;
padding: 0px;
margin: 0px;
background: transparent url(http://i.imgur.com/0KbiL.png);
position: fixed;
top: 0px;
overflow: hidden;
}

Categories