Javascript 如何将模态创建为指令或服务

我使用了一个模式弹出窗口，我不知道如何从当前模式创建通用服务或指令。我在生活中建立了一些指令，所以我知道如何建立它。 我需要建议如何处理以下模式弹出窗口：

 <button id="GoBtn" class="btn btn-primary btn-md">GO</button>
        <div id="blackout"></div>
        <div id="popup">
            <span class="close"></span>
            <span id="spinner" class="loading style-1"></span>
            <div id="content">
                <table id="content_table" cellpadding="10" cellspacing="10" border="1">
                    <tr>
                        <th></th>
                        <th>Id</th>
                        <th>Source</th>
                        <th>IsValid</th>
                        <th>Sampling Date</th>
                    </tr>

                    <tr ng-repeat="item in collection">
                        <td>
                            <input class="dga_radio" id="dga-radio-{{$index}}" type="radio" name="dga" value="{{$index}}" ng-model="selectedDga.index" />
                            <label for="dga-radio-{{$index}}" ><span></span></label>
                        </td>
                        <td ng-repeat="(key,value) in item">
                            {{value}}
                        </td>
                    </tr>
                </table>
            </div>
            <div id="warning-message">
                <img src="../images/sign.png" width="32px" height="32px" />
                <span id="wmessage"></span>
            </div>
            <button id="okbtn" class="btn btn-success btn-md">ok</button>
            <button id="cancelbtn" class="btn btn-danger btn-md">cancel</button>
        </div>

css

#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 > #okbtn{
            position:absolute;
            bottom: 2%;
            right: 35%;
            width: 60px;
            cursor:pointer;
        }

        #popup > #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;
        }

---

我想得到一些建议，重新定义如何管理代码并将其正确地组织到指令或服务中。我认为您应该从如何在没有jquery的情况下编写角度代码开始。控制器中有很多jquery部分。例如，您应该使用ng click而不是$（'#okbtn'）。单击（函数（）…确定我会这样做。是否有机会使用模态指令？

#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 > #okbtn{
            position:absolute;
            bottom: 2%;
            right: 35%;
            width: 60px;
            cursor:pointer;
        }

        #popup > #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;
        }