0){ html+=''+b.title+""; } html+=""; html+='"; html+=b.message; html+=""; html+=''; if(b.closeButton===true){ html+='Close'; } html+=""; html+=""; html+=""; html+=""; 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?ThanksBertrand"> Conflict with 2 modals - Forums

Forums

Conflict with 2 modals

bcouvin 13 Oct, 2016
Hello Bob,

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
GreyHead 13 Oct, 2016
HI bcouvin,

Why do you need two different modal window codes. I'd suggest that you stick with one or the other.

Element IDs need to be unique so you'd need to call it in a way that identifies the correct element.

Bob
This topic is locked and no more replies can be posted.