Solved

Jquery Overlay not showing correctly

Posted on 2016-08-31
1
66 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 56

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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery form 9 39
Use "if not" in a condition 2 18
How can I use Javascript to insure proper entry of URL? 6 26
how to use jquery variable in mysql query 20 31
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

735 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