CODEWITHSUNDEEP
jqueryhtmljquery-mobilepopup
Jurgen Dictus
Jurgen Dictus

Reputation: 346

jQuery popup without using the jquery.mobile-1.4.5.min.js

I would like to use a button next to a selection list. That button would present a popup iframe with a datagrid of the records.

It all works when I include the 'jquery.mobile-1.4.5.min.js', but when I do, it changes the look and feel of the site completely to a mobile app. Is there a way or another library that I can use to avoid this behavior?

Here is what the popup looks like (but with a bad mobile look-and-feel): with jquery.mobile-1.4.5.min.js

Without the 'jquery.mobile-1.4.5.min.js' it looks like this: without jquery.mobile-1.4.5.min.js

Can anyone help me with this?

Upvotes: 0

Views: 228

Answers (2)

Jurgen Dictus
Jurgen Dictus

Reputation: 346

Solved by using the jQuery-ui libraries.

enter image description here

Will still have to look into the issue where the Bootstrap menu does not roll over the iFrame... For now I have put the iFrame completely over the menu. (will have sometihng to do with z-index I guess)

Upvotes: 0

Ikelie Cyril
Ikelie Cyril

Reputation: 130

You can create a simple light box using javascript and css. Then use ajax to load the datagrid of records into the lightbox.

CSS

.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: fixed;
top: 5%;
left: 5%;
width: 90%;
height: auto;
max-height: 90%;
padding: 16px;
border: 2px solid #930;
background-color: white;
z-index:1002;
overflow: auto;
}

Add this to your page HTML code

<div id="light" class="white_content"></div>
<div id="fade" class="black_overlay"></div>

The make an ajax call to get the records when the button is click. This snippet will work. Though you will have to modify it to suit your program

$(document).ready(function(e) {
$(document).delegate('#btnID', 'click', function(){
    $('.white_content').html(''); //set lightbox body to blank
    $.post(url,
    {
        //data
        },
        function(data, status){
            $('.white_content').html(data);
            }).fail(function(){
                $('.white_content').html('Loading failed')
                });
    });
});

Upvotes: 1

Related Questions