Open modal

widget
Tags: #<Tag:0x00007f015a22b5c0>

(Frederick) #1

Been trying to play a bit with a modal i found on this forum, issue: when opening the mmodal icons are not visible at once, i need to cilck on a button within modal before it shows and cant find a solution to it.

  <style>
.custom-modal-container {
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  color: white;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
  transition: opacity 0.5s, visibility 0s linear 0.5s;
  z-index: 99999;
}
.custom-modal-container.active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.custom-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 2em;
  border-radius: 0.5em;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.custom-modal.close-modal-area {
  width: 100%;
  height: 100%;
}
.custom-modal.custom-modal-box {
  background: #8e9f9a;
  text-align: center;
}
.custom-modal-content .custom-modal {
  width: 100%;
  max-width: 40em;
}

.toggle-modal-button {
  background-color: transparent;
  color: white;
  display: inline-block;
  padding: 1em;
  cursor: pointer;
  border-radius: 0.5em;
  box-shadow: inset 0 0 1px white;
}
.toggle-modal-button:hover, .toggle-modal-button:focus,
    .toggle-modal-button:active {
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: none;
}
.custom-modal-content .toggle-modal-button {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1em;
}

.custom-modal-content {
  color: peru;
  width: 90%;
  max-width: 1200px;
  padding-top: 2em;
  margin: 0 auto;
}
</style>
<section class="custom-modal-container" ng-class="{ active: show_modal }">
  <div for="toggler" class="custom-modal close-modal-area" ng-click="show_modal=false"></div>
  <div class="custom-modal custom-modal-box">

    <div>All Lights</div>
    <br />

			<div	class="col-md-4" ng-repeat="light in itemsInGroup('All_lights_dimmer')" ng-init="models={}">
				<div		 ng-init="models[light.name] = { name: light.label, hidelabel: false, hideonoff: true, item: light.name}">
                <div class="box" style="height: 150px; margin: 10px;">
                    <widget-switch ng-model="models[light.name]"></widget-switch>


    
  </div>
</section>
<section class="custom-modal-content">
  <div class="toggle-modal-button" ng-click="show_modal=true">LIGHTS</div>
</section>
```!