asked on

My dialog box isnt work, no box displays but text does

I have this JS:

<script>
$('#wrapper').dialog({
    autoOpen: false,
    title: 'Basic Dialog'
});
$('#opener').click(function() {
    $('#wrapper').dialog('open');
    return false;
});
</script>

Open in new window

#show {
    position: relative;
    float:left;
    margin:5px;
}
#show:hover img{
    opacity:0.5;
}
#show:hover button {
    display: block;
    font-size: 10px;
    }
    #show  button {
        position:absolute;
        display:none;
    }
    #show  button.btn {
        top:0;
        left:100;
    }

Open in new window

              <div class="row">
            
                <div class="col-md-3 col-lg-3 " id= "show"> <img alt="User Pic" src="http://babyinfoforyou.com/wp-content/uploads/2014/10/avatar-300x300.png" class="img-circle img-responsive">
                <button data-original-title="Upload Image" data-toggle="tooltip" class="btn btn-sm btn-info" id="opener"><i class="glyphicon glyphicon-edit"></i></button>
                 </div>
    <div id="wrapper">
<p>Some txt goes here</p>
</div>

Open in new window

A dialog should popup but instead the "some txt goes here, comes after the image without having to click, I dont think Im missing anything, and no dialog pop-ups so im not sure whats wrong

E C

It's hard to tell without seeing the entire page and all the code. Is this site on a development server or can you share the link? When is the dialog box supposed to appear? When the visitor is attempting to leave the page? (an exit intent modal window?) or after a certain amount of time? or when they click on something or hover over something? In other words, what fires the modal window to appear?

Jazzy 1012

ASKER

I can't share the link unfortunately, but no its an image, when you hover over it a "Edit icon" appears and when I click on it (since it is a button as you can see above), the dialog should pop-up, I can show you the whole image with the form, but its bit long?

Chris Stanyon

Any jQuery code you have on your page should be wrapped in a Document Ready block. This means that your code won't fire until the DOM has fully loaded. The way you have it currently means that your code is likely to fire before your elements have even loaded. This is what you should have:

<script type="text/javascript">
$(document).ready(function() {
    $('#wrapper').dialog({
        autoOpen: false,
        title: 'Basic Dialog'
    });
    $('#opener').click(function(e) {
        e.preventDefault();
        $('#wrapper').dialog('open');
    });
});
</script>

Open in new window

E C

So the edit icon is working fine?
And when you click on it, nothing happens?

Jazzy 1012

ASKER

Yes it is fine, I just get the text on the bottom

Chris Stanyon

Your button has nothing to do with your javascript so not sure why you're looking at that. The problem is likely to be because your document ready block is missing. Please re-read my prevous comment.

Jazzy 1012

ASKER

Oh sorry must have not seen it, You mean I should put the code you provided instead of the jquery code I have or with it? Sorry Im a bit newbie in jquery

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial