单击按钮时如何在主体上添加覆盖层，以及如何清除页面加载时的紫色涂层内容

Question

I have two issues/questions...

Question #1: I am using a label overlay plugin called purplecoat.js ( http://ellekasai.github.io/purplecoat.js/ ) and I need to find a way to add an overlay backdrop to the entire body when the "toggle hints" button is clicked. Right now, when the toggle hints button is clicked, it displays the labeled overlays over the identified content, but I also want a complete background overlay added to the body to help bring focus to the labeled overlays.

My 2nd issue is, my actual website is a multi-page site and I need to use this purplecoat overlay plugin on each page so users can click to see the labeled hints. My problem is when the user clicks on the Toggle Hints button to view the labeled hints on one page, it will work fine, but when they open a new page of the site and click on the same toggle hints button, it shows the labeled hints from the previous page. If I refresh the page, then it shows the correct updated hints.

I need to find a way to clear the purplecoat.js content when a new page loads, so it does not show the wrong label overlays - or somehow discretely refresh the page when someone opens a new page so it clears the purplecoat.js.

I have a jsfiddle of my login page where the purplecoat.js label overlay is working when clicking on the Toggle Hints link. I just need to add the backdrop overlay, then clear the purplecoat.js when a new page/or modal is loaded. My site has several pages and modals, and the pages and modals are all opened with a button - so if there is a way to clear the purplecoat.js cache when any button is clicked, may work. I am open to suggestions.

JSFiddle link: https://jsfiddle.net/txptbf15/

I am new to learning jQuery/js, so please be kind! :-)

HTML (of my login page):

<div id="hints"><button data-purplecoat-toggle="foo" class="btn-loginHint">Toggle Hints!</button></div>
<div id="Login" class="loginTemplate panel panel-primary">
        <div class="panel-heading clearfix">
            <h2 class="pull-left">Log On</h2>
                <div id="LangWrapper" class="pull-right">
                    <button id="LangButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-purplecoat="foo" data-purplecoat-label="Select Language" data-purplecoat-color="rgba(238, 122, 39, 0.9)">
                        <span id="chooseLanguage">Language</span>  
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li onclick="_.utils.ChangeLanguage('en')"><a href="#">(English)</a></li>
                        <li onclick="_.utils.ChangeLanguage('jp')"><a href="#">(日本語)</a></li>
                    </ul>
                </div>
        </div>
        <div class="panel-body">
            <p>Please enter your username and password</p>
            <form class="">
                <fieldset class="">
                    <legend>Account Info</legend>
                    <div class="form-group">
                        <label for="accountType">Account Type</label>
                        <select class="form-control" id="accountType" name="accountType" data-purplecoat="foo" data-purplecoat-label="Select Account from menu that you want to access." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
                            <option value="customer">Option 1</option>
                            <option value="reseller">Option 2</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="email">EMail</label>
                        <input type="text" class="form-control" id="email" name="email" placeholder="Email" data-purplecoat="foo" data-purplecoat-label="Input email address you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
                    </div>
                    <div class="form-group">
                        <label for="email">Password</label>
                        <input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" data-purplecoat="foo" data-purplecoat-label="Input password you used when registering." data-purplecoat-color="rgba(238, 122, 39, 0.9)">
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox" name="RememberMe" value="1" /> Keem me logged in
                            </label>
                        </div>
                    </div>    
                    <p class="actions">
                        <button type="button" id="btnSubmit" class="btn btn-primary" data-purplecoat="foo" data-purplecoat-label="Select button to Login" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-sign-in"></i> Log In</button>
                        <a href="#" id="ForgotPasswordLink" class="btn btn-default" data-purplecoat="foo" data-purplecoat-label="Select button to retrieve password." data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-puzzle-piece"></i> Forgot Password</a>
                        <a id="loginRegister" href="#"
                        class="pull-right" data-purplecoat="foo" data-purplecoat-label="Select to Register" data-purplecoat-color="rgba(238, 122, 39, 0.9)"><i class="fa fa-key"></i> Register</a>
                    </p>
                </fieldset>
            </form>
        </div>

    </div>

CSS:

.purplecoat { display: none; position: absolute; padding: 5px; box-sizing: border-box; background-color: rgba(142, 68, 173, 0.9); color: #FFF; text-align: center; font-weight: bold; overflow: hidden; z-index: 9999; } .purplecoat-inner { display: table; width: 100%; height: 100%; } .purplecoat-inner-text { display: table-cell; vertical-align: middle;}
.purplecoat {
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.2em !important;
}
.btn-loginHint {
    background-color: transparent;
    color: #fff;
    border: none;
    float: left;
    padding-top: 5px;
}

Answer 1

Regarding Problem 1: the issue seems to be with z-index on all the purplecoat divs; it's set to 9999. As a result what you need is an overlay div with a higher z-index. See my sample below. I've also added a div with the id of overlay. Here is my working fiddle.

#overlay {
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%
  height:100%;
  background-color:white;
  z-index:10000;
}

Regarding Problem 2: I'm not sure how you're loading the pages, but this worked in my fiddle.

$('[data-purplecoat-for]').hide();

After looking at the source code it seems all those overlays have the same property data-purplecoat-for , simply calling hide on them will work. Again if this doesn't work for you I need a little more info. By the way, the github project says it's no longer being maintained.