"hash mark" is a selector (in js, css...) to point an ID, so if you have <div id="test"> and you want to apply some functionality or some css styling with js you will select it as '#test' (the code will be different if you use jQuery framework or not). Jquery is the most used nowadays so you'll find $('#test'). I'll try to explain how modals closing work, but first I need to explain all modal parts to put us in situation As explanation I will use as example bootstrap's modal (as its the most used at this moment). The modal:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The "Trigger" part:
To trigger the modal window, you need to use a button or a link.
Then include the two data-* attributes:
data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal
The "Modal" part:
The parent <div> of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal ("myModal").
The .modal class identifies the content of <div> as a modal and brings focus to it.
The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.
The attribute role="dialog" improves accessibility for people using screen readers.
The .modal-dialog class sets the proper width and margin of the modal.
The "Modal content" part:
The <div> with class="modal-content" styles the modal (border, background-color, etc.). Inside this <div>, add the modal's header, body, and footer.
The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The .close class styles the close button, and the .modal-title class styles the header with a proper line-height.
The .modal-body class is used to define the style for the body of the modal. Add any HTML markup here; paragraphs, images, videos, etc.
The .modal-footer class is used to define the style for the footer of the modal. Note that this area is right aligned by default.
Modal Size
Change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals.
Add the size class to the <div> element with class .modal-dialog:
Small:
<div class="modal-dialog modal-sm">
Large:
<div class="modal-dialog modal-lg">
NOTE: To let modal at medium size let it "as is" without adding modal-* class. By default, modals are medium in size.
To resume and answer your question, the button with data-dismiss="modal" and the close class are readed by bootstrap's javaScript (using jQuery, but this is not relevant in that case) then changes the display:block; to display:none; and many other stylings, compare yourself:
Opened modal:
bottom:0px;
box-sizing:border-box;
color: rgb(51, 51, 51);
display:block;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
height:89px;
left:0px;
line-height:20px;
opacity:1;
outline-color:rgb(51, 51, 51);
outline-style:none;
outline-width:0px;
overflow-x:hidden;
overflow-y:auto;
padding-left:17px;
position:fixed;
right:0px;
top:0px;
transition-delay:0s;
transition-duration:0.15s;
transition-property:opacity;
transition-timing-function:linear;
width:1329px;
z-index:1050;
Closed modal:
bottom:0px;
box-sizing:border-box;
color:rgb(51, 51, 51);
display:none; /* changed */
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
height:auto; /* changed */
left:0px;
line-height:20px;
opacity:0; /* changed */
outline-color:rgb(51, 51, 51);
outline-style:none;
outline-width:0px;
overflow-x:hidden;
overflow-y:hidden;
position:fixed;
right:0px;
top:0px;
transition-delay:0s;
transition-duration:0.15s;
transition-property:opacity;
transition-timing-function:linear;
width:auto; /* changed */
z-index:1050;
Note that others like padding-left disappeared.
This can be reached simply using jQuery as this:
<script type="text/javascript">
$('#CloseButtonID').click(){
$('#modalID').css('display','none');
$('#modalID').css('opacity', 0);
}
</script>
In your case, using simply css3 modal, the fact is on modalDialog, when is on :target state it changes opacity:0 to opacity:1. How?
When you click on <a href="#openModal"> the target points to <div id="openModal" class="modalDialog"> (note that # points to an ID), so modalDialog changes to modalDialog:target.
And what about closing the modal?
When you click on <a href="#"> the target goes to # (when # is used single on href means the same page where you are) so it makes modalDialog loose the :target and comes back to opacity: 0;
