title: how to create modal as a directive or service
body: <p>I have a modal popup, which I used, I don't know how can I create from this current modal a generic service or directive. I have build some directives in my life so I know how to build it.
  I need suggestion to what to do with the following modal pop-up:</p>
  
  <pre><code> &lt;button id="GoBtn" class="btn btn-primary btn-md"&gt;GO&lt;/button&gt;
          &lt;div id="blackout"&gt;&lt;/div&gt;
          &lt;div id="popup"&gt;
              &lt;span class="close"&gt;&lt;/span&gt;
              &lt;span id="spinner" class="loading style-1"&gt;&lt;/span&gt;
              &lt;div id="content"&gt;
                  &lt;table id="content_table" cellpadding="10" cellspacing="10" border="1"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;Id&lt;/th&gt;
                          &lt;th&gt;Source&lt;/th&gt;
                          &lt;th&gt;IsValid&lt;/th&gt;
                          &lt;th&gt;Sampling Date&lt;/th&gt;
                      &lt;/tr&gt;
  
                      &lt;tr ng-repeat="item in collection"&gt;
                          &lt;td&gt;
                              &lt;input class="dga_radio" id="dga-radio-{{$index}}" type="radio" name="dga" value="{{$index}}" ng-model="selectedDga.index" /&gt;
                              &lt;label for="dga-radio-{{$index}}" &gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;
                          &lt;/td&gt;
                          &lt;td ng-repeat="(key,value) in item"&gt;
                              {{value}}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div id="warning-message"&gt;
                  &lt;img src="../images/sign.png" width="32px" height="32px" /&gt;
                  &lt;span id="wmessage"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;button id="okbtn" class="btn btn-success btn-md"&gt;ok&lt;/button&gt;
              &lt;button id="cancelbtn" class="btn btn-danger btn-md"&gt;cancel&lt;/button&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The logic himself is inside the controller:</p>
  
  <pre><code>$("#blackout, .close").click(function () {
          $("#blackout").removeClass("visable");
          $("#popup").removeClass("visable");
      });
  
      $("#GoBtn").click(function () {
  
          var wmessage_container = $('#warning-message');
          var wmessage = $('#warning-message &gt; #wmessage');
          startDate = $("#datepicker-start").val();
          endDate = $("#datepicker-end").val();
          var content = $("#content");
          console.log('reach here!');
          $scope.collection = [];
          if ((angular.isDefined(startDate) &amp;&amp; startDate != '') &amp;&amp; (angular.isDefined(endDate) &amp;&amp; endDate != '')) {
              console.log('case 1');
              //check if startDate and endDate are valid
              if (startDate &gt; endDate) {
                  console.log('wmessage_container', wmessage_container);
                  wmessage_container.show();
                  $("#spinner").css('display', 'none');
                  content.css('display', 'none');
                  wmessage.text('start date and end date values are invalid!');
                  console.log('startDate is bigger than end date');
              }
              else {
                  var promise = dataFactory.getDGAList(startDate, endDate);
                  wmessage_container.css('display', 'none');
                  content.show();
                 promise.then(function successCallback(response) {
                      // this callback will be called asynchronously
                      // when the response is available
                      console.log('success callback');
                      console.log('response.status ', response.status);
                      console.log('response.data', response.data);
                      console.log('response.headers', response.headers);
                      console.log('response.config', response.config);
                      $("#spinner").css('display', 'none');
                      if (response.status == 200) {
                          $scope.collection = response.data;
                      }
  
                  }, function errorCallback(response) {
                      // called asynchronously if an error occurs
                      // or server returns response with an error status.
                      content.hide();
                      $("#spinner").css('display', 'none');
                      wmessage.text('No relevant Data found in requested dated ,\nPlease try other date range !');
                      wmessage_container.show();
                      console.log('error Callback');
                      console.log('response.data', response.data);
                      console.log('response.headers', response.headers);
                      console.log('response.config', response.config);
                  });
  
              }
  
              //call DataFactory service.
          } else {
  
              wmessage_container.show();
              content.hide();
              $("#spinner").css('display', 'none');
              if ((startDate == '' || !angular.isDefined(startDate)) &amp;&amp; (endDate == '' || !angular.isDefined(endDate))) {
                  console.log('case 2');
                  wmessage.text('start date and end date are required !');
              }
              else if (startDate == '' || !angular.isDefined(startDate)) {
                  console.log('case 3');
                  wmessage.text('start date is required !');
              } else {
                  console.log('case 4');
                  wmessage.text('end date is required !');
              }
  
          }
  
          console.log('startDate', startDate);
          console.log('endDate', endDate);
  
          $("#blackout").addClass("visable");
          $("#popup").addClass("visable");
  
      });
  
      $('#okbtn').click(function () {
          var selectedDGA = $scope.collection[$scope.selectedDga.index];
          $("#blackout").removeClass("visable");
          $("#popup").removeClass("visable");
          var promise = dataFactory.getDGASummary(selectedDGA["Id"]);
          promise.then(function successCallback(response) {
              // this callback will be called asynchronously
              // when the response is available
              console.log('success callback');
              console.log('response.status ', response.status);
              console.log('response.data', response.data);
              console.log('response.headers', response.headers);
              console.log('response.config', response.config);
              console.log('response.data[IEEE]'+response.data['IEEE']);
              generateIEEE(response.data['IEEE']);
              generateIEC(response.data['IEC']);
              generateCIGRE(response.data['CIGRE443']);
              generateTOA(response.data['TOA']);
              generateNEI(response.data['NEI']);
              generatePTX(response.data['PTX']);
              generateCOCO2Ratio(response.data['CoCo2Ratio']);
              generateDuvalTriangle(response.data['DuvalTriangle']);
              generateDuvalPentgons(response.data['DuvalPentagon']);
              var arr = response.data['DgaSample']['Results'];
              console.log('arr', arr);
              $scope.gases_table = arr;
  
  
          }, function errorCallback(response) {
              // called asynchronously if an error occurs
              // or server returns response with an error status.
              console.log('promise callback');
              console.log('response.data', response.data);
              console.log('response.headers', response.headers);
              console.log('response.config', response.config);
          });
      });
  
      $('#cancelbtn').click(function () {
          $("#blackout").removeClass("visable");
          $("#popup").removeClass("visable");
      })
  </code></pre>
  
  <p>The css</p>
  
  <pre><code>#blackout {
              right: 0;
              top: 0;
              opacity: 0;
              width: 100vw;
              height: 100vh;
              position: fixed;
              visibility: hidden;
              background: rgba(0, 0, 0, 0.8);
              transition: z-index 500ms, visibility 800ms, opacity 1000ms;
          }
  
          #blackout.visable {
              opacity: 1;
              z-index: 8;
              visibility: visible;
          }
  
          #popup {
              opacity: 0;
              top: -250px;
              left: -300px;
              width: 600px;
              height: 250px;
              padding: 15px;
              position: fixed;
              border-radius: 5px;
              margin: -125px 0 0 50%;
              background: rgb(248, 248, 248);
              transition: top 550ms, opacity 500ms, z-index 500ms;
          }
          #popup.visable {
              top: 50%;
              opacity: 1;
              z-index: 9;
          }
  
          #popup .close {
              top: -10px;
              width: 30px;
              height: 30px;
              right: -10px;
              cursor: pointer;
              position: absolute;
              border-radius: 15px;
              background: rgb(255, 255, 255);
              background-image: url(http://imgh.us/close_1.svg); /**TODO: transfer it to relative path**/
              background-size: contain;
          }
  
  
          #popup .close:hover {
              background-image: url(http://imgh.us/close_hover.svg); /**TODO: transfer it to relative path**/
          }
  
          #popup &gt; #okbtn{
              position:absolute;
              bottom: 2%;
              right: 35%;
              width: 60px;
              cursor:pointer;
          }
  
          #popup &gt; #cancelbtn{
              position:absolute;
              bottom: 2%;
              right: 50%;
              width: 60px;
              cursor:pointer;
          }
          #GoBtn{
              width: 60px;
          }
  
          #warning-message{
              position:absolute;
              padding:0;
              margin-top: 15%;
              width: 100%;
              padding-right: 30px;
              text-align: center;
          }
          #wmessage{
              font-family:'Segue UI', Calibri, arial, verdana, sans-serif;
              font-size: 20px;
              font-weight:normal;
              margin:0;
              padding: 5px;
          }
  </code></pre>