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

Question

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):

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

Can anyone help me with this?

Is the question how to _style_ the `dialog` or how to [make it work](http://stackoverflow.com/questions/5660263/how-to-display-an-iframe-inside-a-jquery-ui-dialog)? — camelCase, Oct 28 '15 at 14:53
Is this a mobile app? If not use jquery-ui instead of jquery.mobile. — Gregg Duncan, Oct 28 '15 at 14:54
Search for "jQuery Modal Plugins" and pick the one that best suits your needs. — ezanker, Oct 28 '15 at 14:56
It is the question on how to make it work without changing the style. I will look in to the query-ui library, thanks. If that doesn't work I will lookup the Modal plugins — Jurgen Dictus, Oct 28 '15 at 15:21

score 1 · Answer 1 · answered Oct 30 '15 at 14:52

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')
                });
    });
});

Jurgen Dictus · Answer 2 · 2015-11-15T14:43:21.090

0

Solved by using the jQuery-ui libraries.

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)

edited Nov 15 '15 at 14:43

answered Oct 30 '15 at 14:21

Jurgen Dictus

346
3
15

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

2 Answers2