I tried to impelement Modal window called from CCv5. This worked perfectly by following this link:
https://www.chronoengine.com/faqs/70-cfv5/5252-how-can-i-open-a-modal-window-from-a-cfv5-form.html
Here is my implementation way:
1- In CCv5, in PreProcessing Display:
<?php
// load the Joomla! modal code
JHtml::_('behavior.modal');
// Over-ride the default CF CSS for a modal link
$jdoc = \JFactory::getDocument();
$style = "
#modal_a {
display: inline;
position: relative;
}";
$jdoc->addStyleDeclaration($style);
?>
2- For each row, in HTML,
Model.ID:<a href="index.php?option=com_chronoconnectivity5/&cont=lists&act=view&ccname=CCV5name&tmpl=component&gcb={Model.ID}" class="modal" id="modal_a" rel="{handler: 'iframe',size: {x: 1300, y: 700}}">{MyText}</a>
I have also for each row, a column defined by:
Model.myfile:<div class="container"> <div class="row"><a style="visibility: hidden;" id="Model.myfile_ID" class="ImageDoc view-pdf" href="/custom/UploadFiles/{Model.myfile}" >{Model.myfile}</a></div></div>
This code is for displaying a pdf file named {Model.myfile}. I used EasyModal.js found from the net to display this pdf file. Here is the original code of EasyModal.js:
(function(a){
a.createModal=function(b){
defaults={title:"",message:"Your Message Goes Here!",closeButton:true,scrollable:false};
var b=a.extend({},defaults,b);
var c=(b.scrollable===true)?'style="max-height: 420px;overflow-y: auto;"':"";
html='<div class="modal fade" id="myModal">';
html+='<div class="modal-dialog">';
html+='<div class="modal-content">';
html+='<div class="modal-header">';
html+='<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
if(b.title.length>0){
html+='<h4 class="modal-title">'+b.title+"</h4>";
}
html+="</div>";
html+='<div class="modal-body" '+c+">";
html+=b.message;
html+="</div>";
html+='<div class="modal-footer">';
if(b.closeButton===true){
html+='<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>';
}
html+="</div>";
html+="</div>";
html+="</div>";
html+="</div>";
a("body").prepend(html);
a("#myModal").modal().on("hidden.bs.modal",function(){
a(this).remove();
});
};
})(jQuery);
Here is what I got in CCV5 listing, see the screenshot: "Screen Shot 2016-10-13 at 11.21.23.png"
However, when I click on the pdf file, I got the view of my pdf file plus the link of {MyText}. Please look the screenshot : "Screen Shot 2016-10-13 at 11.25.22.png". {MyText} is in blue color. This belongs to its row CCV5.
The problem is that the 2 modals ({MyText} and Model.myfile) belong to the same class "modal". I think...
Is there any solution to solve my problem?
Thanks
Bertrand