-1

このフローティング ボタンの問題を修正できないようです。iframe タグの一部の属性が html5 で機能しないことに関係があると思います。これを正しく機能させるための簡単な代替手段はありますか?

<!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="X-UA-Compatible" content="IE=EmulateIE7" />

   <title>Quadax Registration</title>

<script language="javascript" id="clientEventHandlersJS">
    function btnComplete_onclick() {
        frmQuadMaX.OBKey_REG_Ticket_Status_1.value = "C";
        frmQuadMaX.OBBtn_Yes.click();
        btnComplete.disabled = true;
    }
</script>

<script language="javascript" id="Script1">
    function btnCancel_onclick() {
        frmQuadMaX.OBBtn_Yes.click();
    }
</script>


<script type="text/javascript">
    function submitform(){
        //Parent Submit Form Function
        frmQuadMaX.OBBtn_Yes.click();
    }

    function calcHeight(){
        //find the height of the internal page
        var the_height= document.getElementById('fraQuadMaX').contentWindow.document.body.scrollHeight;
        //change the height of the iframe
        document.getElementById('fraQuadMaX').height= the_height;
    }

function resizeFrame()
{
//resize the iframe so complete and cancel buttons are always visible
var frameHeights= document.getElementById('fraQuadMaX').scrollHeight;
var frameHeight= document.getElementById('fraQuadMaX').innerHTML = window.innerHeight;
var bodyHeight = document.body.clientHeight;

if (frameHeight > 40)
{
var scroll = ((bodyHeight - 60)/bodyHeight * 100);
document.getElementById('fraQuadMaX').style.height=("length" + scroll);
}

var frameHeight= document.getElementById('fraQuadMaX').scrollHeight;
var formHeight = frameHeight + 10;
document.getElementById('btnCancel').style.top = formHeight - 10;
document.getElementById('btnComplete').style.top = formHeight - 10;

}


</script>
</head>

<body onload="resizeFrame()" onresize="resizeFrame()" style="overflow: hidden">          

<FORM id="frmQuadMaX" action ="--Webbot-Self--" name="frmQuadMaX"  
    method="post">
    <INPUT id="OBKey_HARP_Account_Number_1" 
        style="Z-INDEX: 101; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 31px"
        tabIndex="0" type="text" name="OBKey_HARP_Account_Number_1"/> 
    <INPUT id="OBKey_Collection_Date_1" 
        style="Z-INDEX: 106; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 56px"
        tabIndex="0" type="text" name="OBKey_Collection_Date_1"/> 
    <INPUT id="OBKey_Patient_Last_Name_1" 
        style="Z-INDEX: 103; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 80px"
        tabIndex="0" type="text" name="OBKey_Patient_Last_Name_1"/>
    <INPUT id="OBKey_Patient_First_Name_1" 
        style="Z-INDEX: 104; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 80px"
        tabIndex="0" type="text" name="OBKey_Patient_First_Name_1"/>
    <INPUT id="OBKey_Date_of_Birth_1" 
        style="Z-INDEX: 102; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 80px"
        tabIndex="0" type="text" name="OBKey_Date_of_Birth_1"/>
    <INPUT id="OBKey_REG_Ticket_Status_1" 
        style="Z-INDEX: 105; VISIBILITY: hidden; LEFT: 136px; POSITION: absolute; TOP: 80px"
        tabIndex="0" type="text" name="OBKey_REG_Ticket_Status_1"/>
    <INPUT id="OBKey_Requisition_Number_1" 
        style="Z-INDEX: 110; VISIBILITY: hidden; LEFT: 135px; POSITION: absolute; TOP: 128px"
        tabIndex="0" type="text" name="OBKey_Requisition_Number_1"/>

    <INPUT id="OBBtn_Yes" Style=" visibility:hidden"
        type="submit" value="Submit" name="OBBtn_Yes"/> 
    <INPUT id="btnComplete" 
        style="FONT-WEIGHT: bold; Z-INDEX: 115; LEFT: 9px; VISIBILITY: visible; WIDTH: 92px; COLOR: darkblue; BORDER-TOP-STYLE: outset; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; POSITION: absolute; BOTTOM: 107px; HEIGHT: 24px; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: outset"
        type="button" value="Complete" name="btnComplete" 
        language="javascript" onclick="return btnComplete_onclick()" 
        tabIndex="1"/>  
    <INPUT id="btnCancel" 
        style="FONT-WEIGHT: bold; Z-INDEX: 109; LEFT: 108px; VISIBILITY: visible; WIDTH: 92px; COLOR: darkblue; BORDER-TOP-STYLE: outset; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; POSITION: absolute; BOTTOM: 107px; HEIGHT: 24px; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: outset"
        type="button" value="Cancel" name="btnCancel" 
        language="javascript" onclick="return btnCancel_onclick()" 
        tabIndex="1"/>      

</FORM>

<IFRAME id="fraQuadMaX" tabIndex="0" name="fraQuadMaX" 
        style="OVERFLOW:auto; WIDTH:101%; HEIGHT:91%; position:absolute; top:0px; z-index: 100; left: 8px;"
        height="2000px" >
</IFRAME>

<script>



    fraQuadMaX.document.write("Please Wait...")

    var lvURL = "https://atbsvr.quadax.com/static/HarpDemoRedirect.htm?X=OPEN&acct=" + 
        frmQuadMaX.OBKey_HARP_Account_Number_1.value + "&cli=SX" + "&virt=QUADAX" + "&EDI_DOS=" + 
        frmQuadMaX.OBKey_Collection_Date_1.value + "&PT_LAST_NAME=" + 
        frmQuadMaX.OBKey_Patient_Last_Name_1.value + "&PT_FIRST_NAME=" + 
        frmQuadMaX.OBKey_Patient_First_Name_1.value + "&EDI_REQ_NUM=" + 
        frmQuadMaX.OBKey_Requisition_Number_1.value + "&PT_BIRTH_DT=" +
        frmQuadMaX.OBKey_Date_of_Birth_1.value; 

    fraQuadMaX.document.location.href = lvURL;


</script>

</body>
</html>

フローティングボタン

4

1 に答える 1

0 
body{
    height:2000px;
}
#float{
    background:red;
    width:20px;
    height:100px;
    position:fixed;
    top:50px;
    left:0;
}

これにより、ページ側にソーシャル ネットワークのアイコンなどを追加するためのフローティング メニューが作成されます。

このフィドルをチェックしてください：http://jsfiddle.net/TVwAv/

于 2013-04-05T16:24:53.013 に答える