Jazzy 1012
asked on
My dialog box isnt work, no box displays but text does
I have this JS:
<link rel="stylesheet" href="//code.jquery.com/ui /1.12.1/th emes/base/ jquery-ui. css">
<link rel="stylesheet" href="/resources/demos/sty le.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Scripts -->
<script src="assets/js/jquery.min. js"></scri pt>
<script src="assets/js/jquery.popt rox.min.js "></script >
<script src="assets/js/skel.min.js "></script >
<script src="assets/js/util.js"></ script>
<!--[if lte IE 8]><script src="assets/js/ie/respond. min.js"></ script><![ endif]-->
<script src="assets/js/main.js"></ script>
Css:
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
<script>
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
$('#wrapper').dialog('open');
return false;
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><link rel="stylesheet" href="//code.jquery.com/ui
<link rel="stylesheet" href="/resources/demos/sty
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Scripts -->
<script src="assets/js/jquery.min.
<script src="assets/js/jquery.popt
<script src="assets/js/skel.min.js
<script src="assets/js/util.js"></
<!--[if lte IE 8]><script src="assets/js/ie/respond.
<script src="assets/js/main.js"></
Css:
#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;
}
<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>
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
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?
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?
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>
So the edit icon is working fine?
And when you click on it, nothing happens?
And when you click on it, nothing happens?
ASKER
Yes it is fine, I just get the text on the bottom
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.