Solved

Jquery Overlay not showing correctly

Posted on 2016-08-31
1
47 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 52

Accepted Solution

by:
Julian Hansen earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

867 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now