How do I go about opening href link in a jQuery Dialog?
Okay, so I've got the following code shown below to create a dialog using a div within a particular page:
$('#modal').dialog({
autoOpen: false,
width: 600,
height: 450,
modal: true,
resizable: false,
draggable: false,
titl开发者_运维问答e: 'Enter Data',
close: function() {
$("#modal .entry_date").datepicker('hide');
}
});
$('.modal').click(function() {
$('#modal').dialog('open');
});
It is all working fine. However, now what I want to do is to also be able to open a link in a dialog window. For example using something along the lines of the code below:
<a href="/path/to/file.html" class="modal">Open Me!!</a>
I've done this before by hardcoding the path as in the example code below:
$('#modal').load('/path/to/file.html').dialog('open');
In this case however, we can't hardcode the path in the javascript as there will be multiple items coming from the database.
At this point I'm struggling to understand how to get this to work. I'm also convinced that the answer is really obvious, and I'm merely setting myself up to be humbled by the clever folk here at StackOverflow.
I've scratched my head for long enough this afternoon, so my ego has been put away, and hopefully someone can point me in the right direction on how to code this properly.
You can just grab the href attribute and load that
$('.modal').click(function(e) {
e.preventDefault();
$('#modal').load(this.href).dialog('open');
});
In this code dialog size and title is declare in link
<script type="text/javascript">
function tb_parseQuery(query) {
var Params = {};
if (!query) { return Params; }// return empty object
var Pairs = query.split(/[;&]/);
for (var i = 0; i < Pairs.length; i++) {
var KeyVal = Pairs[i].split('=');
if (!KeyVal || KeyVal.length != 2) { continue; }
var key = unescape(KeyVal[0]);
var val = unescape(KeyVal[1]);
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
$(document).ready(function () {
$('a.uimodal').bind('click', function () {
var $this = $(this);
var url = $this.attr("href");
var queryString = url.replace(/^[^\?]+\??/, '');
var params = tb_parseQuery(queryString);
TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
TB_Title = (params['title']);
$('<div>').dialog({
modal: true,
open: function () {
$(this).load(url);
},
height: TB_HEIGHT,
width: TB_WIDTH,
title: TB_Title
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
</div>
</form>
</body>
</html>
Phil, you need to grab the href attribute:
var link = $('#modal').attr('href');
$('#modal').load(href).dialog('open');
加载中,请稍侯......
精彩评论