Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Jquery Overlay not showing correctly

Posted on 2016-08-31
1
Medium Priority
?
91 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 58

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

Find the IP of a Linux Server in Command Line

Knowing your server’s IP address(s) can be a useful bit of information to have for various reasons. This tutorial will teach you how to check the IPs of any modern Linux server. To follow along will simply need access to the server via SSH or TTY.

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.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to dynamically set the form action using jQuery.

730 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