如何通过message_id获取有关模态框的完整消息?
有一个名为" Open Complete Message的按钮。"当我点击那个按钮时,Modal Box会提供演示内容,任何简单的教程?那可以说明我如何让它变得动态?
我是新手,如果你们让我知道任何非复杂的方式,我们将不胜感激。
三江源!
答案 0 :(得分:1)
这里将会有四个不同的东西:按钮,模态,jQuery和CodeIgniter控制器/模型函数。从理论上讲,你会想做类似下面的事情。在实践中,您可能需要相应地调整您的jquery和php。
THE BUTTON
该按钮将使用 data-id 属性,以便您可以存储您提到的message_id。您可能会使用动态PHP填充它。
<button type="button" id="messageButton" class="btn btn-success" title="Open Complete Message" data-id="123">Open Complete Message</button>
THE MODAL
这里解释不多。单击该按钮将触发此模式(通过下面的jQuery)。理论上,模态默认为空。模态中的消息/信息将由jQuery / PHP功能填充。
<div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="messageLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
THE JQUERY
$('#messageButton').on('click', function() {
var theMessageID = $(this).attr("data-id");
var theURL = '/messages/getmessage/'; //adjust according to your site/setup
$.post(url,
{
MessageID: theMessageID,
},
function (data, status) {
if (status == 'success') {
// loop through data
$.each(data, function() {
$('#messageLabel').text(this[1]); // message title
$('#messageModal .modal-body').html(this[2]); // the actual message
});
$('#messageModal').modal('show');
} else {
alert('No message available');
}
}
});//end post
});
控制器
这假设您有一个名为Messages with getmessages function的控制器,以及一个名为get_message的函数的Messages模型。
public function getmessage()
{
// double checking
if ( $this->input->post('MessageID') && is_numeric($this->input->post('MessageID')) ) {
$this->load->model('Messages_model');
$theMessage = $this->Messages_model->get_message($this->input->post('MessageID'));
header('Content-Type: application/json');
echo json_encode( $theMessage );
}
}
希望这有助于事业。但是,请发布您尝试过的内容。