Close modal window in CSS [closed]

Question

Close modal window in CSS [closed]

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

-2

My code to close the modal is:

Html:

a.ventana-cerrar { 
  position: inherit; 
  top: 3px;
  right: 3px;
  background-color: #333; 
padding: 7px 10px;
  font-size: 20px;
  text-decoration: none;
  line-height: 1;
  color: #fff; 
}

<!-- begin snippet: js hide: false console: true babel: false -->

Js:

a.ventana-cerrar {
     position: inherit;
     top: 3px;
     right: 3px;
     background-color: #333;
     padding: 7px 10px;
     font-size: 20px;
     text-decoration: none;
     line-height: 1;
     color: #fff;
    }

And the sale does not close, what I have to change or add to make it work.

css

asked by Axel Arteaga 13.10.2016 в 05:06

source

3 answers

MySql nested query How do I perform an UPDATE with a SELECT of the field and the rows I need to Update? [closed]

score 1 · Answer 1

The best thing I've tried to create modal windows is jQuery. You can define any layer and identify that layer. Then, in a script block you set the layer to be modal and you add the events that your layer should have at the time it opens or closes, for example if you had to make an ajax call to load in your modal layer something more specific , but that you only want to show if the layer is opened.

Simple example:

$("#pinchar").click(function() {
    $("#unError").dialog("open");
});

$('#unError').dialog({
    autoOpen: false,
    modal: true,
    title: 'Error',
    width: 200,
    height: 200,
    buttons: [{
        text: 'Vale',
        click: function() {
            $(this).dialog("close");
        }
    }]
});

<!-- jQuery -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- HTML -->

<div id="unError">
  Muestra un error modal
</div>

<div id="pinchar">
  Pincha aquí para mostrar una ventana modal
</div>

score 0 · Answer 2

If you are going to close a modal window, it would be best to put a width: 0; and a height: 0; and to give it that fading effect, give it an opacity: 0; and animate only that property with transition. The inherit position would not be necessary.

Here I have a modal window made with pure CSS, that's why it helps you: Css modal sale

score 0 · Answer 3

to close the modal is not done with css, if you are using bootstrap your button should be something similar

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

to see examples Modals bootstrap