(function(){
var addFeedbackButton = function(frameHtml, onclickFunction) {
var btnframe = document.createElement('iframe');
btnframe.id = 'opfeedbackbutton';
//add button
var body = document.getElementsByTagName('body')[0];
body.appendChild(btnframe);
//hide button until script was processed sucessfull
btnframe.style.display = "none";
var doc = btnframe.contentWindow.document;
doc.open();
doc.write(frameHtml);
doc.close();
doc.getElementById('feedbackbtn').onclick = onclickFunction;
doc.getElementById('opfeedbackbtnclose').onclick = function(){
document.getElementById('opfeedbackbutton').style.display = 'none';
};
//show butto, if no script errors occured until now
btnframe.style.display = "";
//slide-in button from bottom of screen
setTimeout(function(){
btnframe.className = 'show';
}, 1);
};
var closeDialog = function(showUsedFeebackButton) {
var body = document.getElementsByTagName('body')[0];
var backgroundLayer = document.getElementById('opfeedbackbglayer');
var dialogFrame = document.getElementById('opfeedbackdialog');
body.removeChild(backgroundLayer);
body.removeChild(dialogFrame);
if (showUsedFeebackButton) {
//show feedback button and switch to "used" display-mode:
var feedbackButtonFrame = document.getElementById('opfeedbackbutton');
feedbackButtonFrame.contentDocument.getElementById('body').className = 'used';
feedbackButtonFrame.className = 'show used'; //show button again
}
};
var showModalDialog = function(frameStyle) {
var body = document.getElementsByTagName('body')[0];
//add background layer
var backgroundLayer = document.createElement('div');
body.appendChild(backgroundLayer);
backgroundLayer.id = "opfeedbackbglayer"
backgroundLayer.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; z-index:9001; background-color:black; opacity: 0.45;';
//add dialog box
var dialogFrame = document.createElement('iframe');
dialogFrame.id = "opfeedbackdialog";
dialogFrame.style.cssText = frameStyle;
dialogFrame.style.position = 'fixed';
dialogFrame.style.zIndex = '9002';
body.appendChild(dialogFrame);
dialogFrame.src = 'http://praxis-umfragen.de/udSRp';
//add close event
backgroundLayer.onclick = function(){
closeDialog(true);
};
//add close venet from child frame
window.addEventListener('message', function(evt){
if (evt.data == 'closeJSDialog') {
closeDialog(true);
}
if (evt.data == 'closeJSDialogFinal') {
closeDialog(false);
}
}, false);
//hide button
document.getElementById('opfeedbackbutton').className = '';
};
//feedback button frame-outer style (iframe)
var frameHtml =
''+
''+ //feedback button frame-inner style (html doc)
''+
''+
'╳'+
'Waren Sie bei uns schon in Behandlung?'+
'';
var feedbackClickHandler = function(){
showModalDialog('');
};
//add popup iframe-style to page
var styleEntry = document.createElement('style');
styleEntry.setAttribute('type', 'text/css');
styleEntry.innerHTML = '#opfeedbackdialog { /*background-color: #E2001A;*/ width: 100%; max-width: 940px; height:80%; background-color:white; top:10%; left:calc(50% - 470px); border:1px solid #D0D0D0; } #opfeedbackbutton { margin: 0; border: 0; padding: 0; bottom: -35px; position: fixed; z-index: 9000; height: 35px; width: 300px; left: calc(50% - 150px); border-radius: 5px 3px 0px 0px; transition: bottom 0.3s; } #opfeedbackbutton.show { bottom: 0; transition: bottom 0.5s; transition-delay: 1s; } #opfeedbackbutton.show.used { border: 1px solid #D0D0D0; } @media all and (min-width:0px) and (max-width:990px) { #opfeedbackdialog { left: 0; } } @media all and (min-height:0px) and (max-height:700px) { #opfeedbackdialog { top: 0; height: 100%; } } ';
document.getElementsByTagName('head')[0].appendChild(styleEntry);
//show feedback button on page
addFeedbackButton(frameHtml, feedbackClickHandler);
})();