Widget Tricks - ods-pop-in variants

<h2>
    A pop-in window should be displaying after a short delay
</h2>

<em>
Note: Ods-pop-in will be displayed only once at each browsing session of the user
</em>

<ods-pop-in name="mypopindisco"
            title=""
            display-after="3"
            display-only-once="false">
    <h2>
        Welcome! <i class="fa fa-bell-o" aria-hidden="true"></i>
    </h2>
    <p>
        This is a pop-in sample
    </p>
    <button class="ods-button" 
            ng-click="hidePopIn()">
        Close
    </button>
</ods-pop-in>
      

<div ng-init="pop = {
        'state':false,
        'iframe':false
    }">
    <button class="ods-button"
         ng-click="pop.state = true">
        Pop it!
    </button>

    <button class="ods-button"
         ng-click="pop.iframe = true">
        Pop in with iframe inside
    </button>

    <div class="ods-pop-in"
                   ng-if="pop.state">
        <div class="ods-pop-in__container">
            <h2 class="title">
                Pop!
            </h2>
            <button class="ods-button"
                    ng-click="pop.state = false">
                Close
            </button>
        </div>
        <div class="ods-pop-in__backdrop" ng-click="pop.state = false"></div>
    </div>

    <div class="ods-pop-in"
                      ng-if="pop.iframe">
        <div class="ods-pop-in__container iframe-container">
            <iframe src="/"
                    width="100%"
                    height="300"></iframe>
        </div>
        <div class="ods-pop-in__backdrop"
             ng-click="pop.iframe = false"></div>
    </div>
</div>

.ods-pop-in__container {
    z-index: 102;
}

.ods-pop-in__backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    z-index: 101;
    cursor: auto;
}

.iframe-container {
    width: 100%;
    padding: 10px;
    max-width: inherit;
    margin-left: 120px;
    margin-right: 120px;
}

.iframe-container iframe {
    border: none;
}