Input with Link to "modal"

Asked

Viewed 84 times

0

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

This site illustrates well what I need: https://www.geniol.com.br/logica/sudoku/

modal com possibilidades, sudoku

How can I do that?

(I’m using cell input)

javascript html css games
  • 1

    Your question is a bit superficial. There are hundreds of possibilities. Ideally you would start something trying to implement some modal plugin and call in the input click event. And then, if there is any problem/impediment, you could post here with the code and etc.

  • 1

    Please put an example of your application on http://jsfiddle.net so that we can understand exactly what you have so that it is possible to suggest an implementation or maybe even implement it.

1 answer

1


I developed Geniol’s Sudoku.

The operation is as follows: I take the position of the cell that the user clicked and calculate the X, Y of 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);
}

Browser other questions tagged javascript html css games

You are not signed in. Login or sign up in order to post.