Input with Link to "modal"

Question

Input with Link to "modal"

Navigation

#1 by (1 votes)

0

I'm developing a project with sudoku, and I'd like to show a "modal" with the possibilities every time the user clicks on some cell.

This site illustrates well what I need: link

How can I do this?

(I'm using input in cells)

javascript html css jogos

asked by anonymous 15.07.2015 / 01:22

1 answer

Useful commands for .Htacess [closed] How to generate PDF with Crystal Reports and send it by email?

score 1 · Accepted Answer

I developed the Geniol Sudoku.

The operation is as follows: I take the position of the cell that the user clicked and calculate the X, Y from the middle of it and move the central position of the numpad div to that place.

The code snippet is this (we use CoffeeScript):

# $cell é o div que tem o número que foi clicado e $numpad é o div do modal

left = $cell.position().left  - $numpad.width() / 2 + $cell.width() / 2
top = $cell.position().top - $numpad.height() / 2  + $cell.height() / 2

$numpad.css
    top: top, left: left

$numpad.addClass 'clicked'

And the CSS:

#numpad {
    opacity: 0
    position: absolute;
    display: inline-block;
    width: 70px;
}

#numpad.clicked { 
    opacity: 1;
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
}