Menu
I'm trying to convert Matt Berseth's 'YUI Style Yes/No Confirm Dialog' so I can use it with the jQuery blockUI plugin.
I have to admit I'm no CSS guru but I thought this would pretty easy even for me....except 10hrs later I'm at a loss as to why I can't get the blasted thing to work.
The problem is that I can't seem to get the 'confirmDialogue' DIV to centre on the page without some artifacts showing above it. Alternatively if I reset blockUI's CSS settings by doing....:
$.blockUI.defaults.css = {};
.....I find that the DIV aligns left.
I've tried all sorts of stuff but CSS isn't my strong point being a server side app kinda guy :(
So if anyone out there who's a jQuery/blockUI/CSS wizard reading this...please can you have a go and let me know what I'm getting wrong?
Basically I followed the design template on Matt's blog and the HTML looks like the stuff below (the CSS is unchanged from Matt's sample). You can grab the png 'sprite' file from the complete sample project download at http://mattberseth2.com/downloads/yui_simpledialog.zip - it's a .net project but I'm just trying to get this to work in a simple html file, so no .NET knowledge required.
Anyway any advice and guidance would be really really really useful. I'll even incentivise things buy promising to buy you lashings of beer if we ever meet :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" src="script/jquery-1.2.6.js"></script>
<script type="text/javascript" src="script/jquery.blockUI.js"></script>
<style>
.modalpopup
{
font-family: arial,helvetica,clean,sans-serif;
font-size: small;
padding: 2px 3px;
display: block;
position: absolute;
}
.container
{
width: 300px;
border: solid 1px #808080;
border-width: 1px 0px;
}
.header
{
background: url(img/sprite.png) repeat-x 0px -200px;
color: #000;
border-color: #808080 #808080 #ccc;
border-style: solid;
border-width: 0px 1px 1px;
padding: 3px 10px;
}
.header .msg
{
font-weight: bold;
}
.body
{
background-color: #f2f2f2;
border-color: #808080;
border-style: solid;
border-width: 0px 1px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 30px;
}
.body .msg
{
background: url(img/sprite.png) no-repeat 0px -1150px;
float: left;
padding-left: 22px;
}
.footer
{
background-color: #f2f2f2;
border-color: #808080;
border-style: none solid;
border-width: 0px 1px;
text-align:right;
padding-bottom: 8px;
padding-right: 8px;
}
.close
{
right: 7px;
background: url(img/sprite.png) no-repeat 0px -300px;
width: 25px;
cursor: pointer;
position: absolute;
top: 7px;
height: 15px;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=50);
opacity:0.5;
}
</style>
</head>
<body>
<input id="triggerDialogue" name="triggerDialogue" type="button" value="Go" />
<div id="confirmDialogue"
class="modalpopup" style="display:none; text-align: center">
<div class="container">
<div class="header">
<span class="msg">Are you sure?</span>
<a onclick="return false;" class="close"
href="javascript: return false;"></a>
</div>
<div class="body">
<span class="msg">Do you want to continue?</span>
</div>
<div class="footer">
<input type="button" id="Button1" value="Yes" style="width:40px" />
<input type="button" id="Button2" value="No" style="width:40px" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#triggerDialogue').click(function() {
$.blockUI({ message: $('#confirmDialogue') });
});
});
</script>
</body>
</html>
@Owen - many thanks for that. I had to make a wee change in the .modalPopup CSS class in Matt's stylesheet to:
position: fixed;
....and it works. Much appreciated. I really gotta sit down with my O'Reilly CSS book which I never get a chance to read some night....:)
695
hmm i'm not that familiar with blockUI, but the basics of centering a div are pretty universal. i'm assuming you want your #confirmDialogue div centered within the whole screen?
if so, you want to do a few things:
#confirmDialogue {
position: fixed; // absolutely position this element on the page
height: 200px; // define your height/width so we can calculate with it after
width: 300px;
}
now your jQuery:
$('#triggerDialogue').click(function() {
// to position #confirmDialogue, we need the window height/width
var msg = $('#confirmDialogue');
var height = $(window).height();
var width = $(document).width();
msg.css({
'left' : width/2 - (msg.width() / 2), // half width - half element width
'top' : height/2 - (msg.height() / 2), // similar
'z-index' : 15, // make sure element is on top
});
// etc...
});
basically, you want to fix the position of your #confirmDialogue (so that you can position it relative to the size of your window/document. left and top declarations are calculated based on the elements current height/width, and the window's height and document width.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
