Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Jquery Overlay not showing correctly

Posted on 2016-08-31
1
Medium Priority
?
101 Views
Last Modified: 2016-08-31
Hi,

I'm using this Jquery overlay in my project.

http://dev.vast.com/jquery-popup-overlay/

Having a few issues getting it to diplay correctly onscreen.

It should look like this..

Should look like this..

But it actually looks lilke this..

actually looks like this..
It just seems to leave out the back ground part of the box?  No idea why!


Here's my code:

<button class="my_popup_open">Open popup</button>

    <div id="my_popup">
        <div class="row" ng-if="IsEmail">
            <div class=" col-lg-6 col-md-6">
                <h3>Send Result as Email</h3>
                <div class="form-group form-group-icon-left">
                    <i class="fa fa-envelope input-icon input-icon-hightlight"></i>
                    <label>Email</label>
                    <input class="form-control" placeholder="Enter Email Address" type="text" ng-model="returnValues.Email" />
                </div>
            </div>
            <div class="col-lg-12">
                <input type="button" class="btn btn-success" ng-click="SendEmail()" name=" name" value="Send" />
                <img style="width: 34px !important;" class="" ng-if="IsLoadingEmail" src="~/Content/loader.gif" />
            </div>
        </div>
    </div>
    <button class="my_popup_close">Close</button>
</div>



<!-- Include jQuery Popup Overlay -->
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>


<script type="text/javascript">  

    $(document).ready(function () {

        // Initialize the plugin
        $('#my_popup').popup({
            opacity: 0.3,
            transition: 'all 0.3s'
        });

    });

Open in new window

0
Comment
Question by:SmashAndGrab
1 Comment
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41777847
The background colour is not being explicitly set on the popup div.
The sample on the JQuery-Popup site uses bootstrap and includes the "well" class in the definition of the popup window
<div id="basic" class="well" style="max-width:44em;">

Open in new window

You don't appear to be using Bootstrap so simply give your popup a background

#my_popup {
    background: white;
}

Open in new window

0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question