• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage HTML5 Modal Box schließen

A.Jung

Neues Mitglied
Guten Morgen,
Ich heiße Alexander und komme aus dem Raum Limburg. Für die Firma soll ich ein Dashboard für das neu angeschaffte BI Tool erstellen.

Dazu meine Frage:
Ich habe auf einer Webseite einen Code für eine Modal Box gesehen.

Diese Box kann man aber nur über das "X" verlassen.
Wünschenswert wäre allerdings, wenn man auch über einen Klick in den abgedunkelten Bereich die Box wieder schließen kann.

Ich hoffe Ihr wisst was ich meine.

Den Code könnt ihr euch hier ansehen:

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
bzw.
http://jsfiddle.net/raving/1mhsynmw/

Vielen Dank!
Alexander
 
Werbung:
Das dunkle Overlay ist sicher auch nur ein DIV. Setz einfach ein Click-Event drauf und schliesse die Box darin.
 
Hi,
entschuldige, kannst du mir dann sagen, wie der Code dann aussehen müsste?

Danke!
Alexander
 
Werbung:
So geht's auch.
Code:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#openModal {
  width:0;
height:0;
overflow:hidden; 
}
.open:focus ~ #openModal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, 0.8);
  pointer-events: auto;
}
#openModal > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}


</style>
<title></title>

</head>
<body>
<a tabindex="0" href="#" class="open">Open Modal</a>

<div id="openModal" tabindex="0">
  <div>
     <h2>Modal Box</h2>
  <p>This is a sample modal box that can be created using the powers of CSS3.</p>
  <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
  </div>
</div>
</body>
</html>

Oder besser mit JS/JQuery
 
Zuletzt bearbeitet:
Zurück
Oben