ブートストラップがまったく機能しない、モーダルが閉じない、トランジションが機能しないなど洗練された :( 少し乱雑であることを気にしないでください)。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="index.css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript' src="js/bootstrap.js"></script>
<script type='text/javascript' src="js/jquery.js"></script>
<title></title>
</head>
<body>
<!--
-->
<div class="modal hide " id='myModal'>
<div class="modal-header">
<h3>Select a friend</h3>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<span id="friendSelector" onClick='selectFriend()'>Select a friend first</span>
</div>
</div>
<center id="page">
<h2 id="title"> </h2>
<div id="tabs">
<div class="tabTitle"><span class="tabTitleText">Mutual Friends</span></div>
<div class="tabContent">
<div class="tabContentHeader">
<div class="clientInfo">
<div class="container">
<div class="containerLeft">
<div class="image">
// NOT INTERESTING AND SECRET! :p
</div>
</center>
<!--
Js scripts
-->
<script>
var id = '';
$(function() {
$('.modal-body').load('request.php', { 'type': 'getFriends' });
$('#myModal').modal({
keyboard: false
});
});
$('#myModal').modal('hide');
function selectFriend(){
alert(id);
if(id != '') {
alert('nice');
jQuery.noConflict();
(function ($) {
$('#myModal').modal('hide');
}
)(jQuery);
}
}
function markFriend(friendId) {
id = friendId;
$('#friendSelector').html('Continue');
}
</script>
</body>
</html>
ありがとう、サム