Css 浮动按钮HTML5_Css_Html_Iframe

Css 浮动按钮HTML5

css html iframe

Css 浮动按钮HTML5,css,html,iframe,Css,Html,Iframe,我似乎无法解决这个浮动按钮问题。我相信这与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" > <

我似乎无法解决这个浮动按钮问题。我相信这与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>


四轴登记
函数btnComplete_onclick（）{
frmQuadMaX.OBKey_REG_Ticket_Status_1.value=“C”；
frmQuadMaX.OBBtn_Yes.click（）；
btnComplete.disabled=true；
}
函数btnCancel_onclick（）{
frmQuadMaX.OBBtn_Yes.click（）；
}
函数submitform（）{
//父提交表单功能
frmQuadMaX.OBBtn_Yes.click（）；
}
函数calcHeight（）{
//查找内部页面的高度
var the_height=document.getElementById（'fraQuadMaX'）.contentWindow.document.body.scrollHeight；
//更改iframe的高度
document.getElementById（'fraQuadMaX'）。高度=_高度；
}
函数resizeFrame（）
{
//调整iframe的大小，使“完成”和“取消”按钮始终可见
var frameHeights=document.getElementById（'fraQuadMaX'）.scrollHeight；
var frameHeight=document.getElementById（'fraQuadMaX'）。innerHTML=window.innerHeight；
var bodyHeight=document.body.clientHeight；
如果（帧高度>40）
{
变量滚动=（（车身高度-60）/车身高度*100）；
document.getElementById（'fraQuadMaX'）.style.height=（“长度”+滚动）；
}
var frameHeight=document.getElementById（'fraQuadMaX'）.scrollHeight；
var formHeight=frameHeight+10；
document.getElementById（'btnCancel'）.style.top=formHeight-10；
document.getElementById（'btnComplete'）.style.top=formHeight-10；
}
fraQuadMaX.document.write（“请稍候…”）
var lvURL=”https://atbsvr.quadax.com/static/HarpDemoRedirect.htm?X=OPEN&acct=" + 
frmQuadMaX.OBKey\u HARP\u Account\u Number\u 1.value+“&cli=SX”+“&virt=QUADAX”+”&EDI\u DOS=“+
frmQuadMaX.OBKey\u Collection\u Date\u 1.value+“&PT\u LAST\u NAME=“+
frmQuadMaX.OBKey_Patient_Last_Name_1.value+“&PT_FIRST_Name=“+
frmQuadMaX.OBKey_Patient_First_Name_1.value+”&EDI_REQ_NUM=“+
frmQuadMaX.OBKey\u请购单\u编号\u 1.value+“&PT\u出生\u DT=”+
frmQuadMaX.OBKey\u出生日期\u 1.value；
fraQuadMaX.document.location.href=lvURL；

这将创建一个浮动菜单，在页面侧添加社交网络图标等

检查这把小提琴：

什么是“不正确”什么是“正确”。你的问题是模糊的“浮动按钮问题”那是什么？“正确工作”什么是正确的？怎么了？请澄清，我将删除我的反对票。最好开始查看您的单个元素，看看您尝试使用的iframe属性的html5替代方案是什么。例如，html5不支持

滚动

属性。我同意。如果是定位，你有位置：绝对，那么位置：相对在哪里？您是默认为IFRAME的父级还是在其他地方指定了relative？@Leeish是对的，请提供更多信息。到目前为止，我已经给出了HTML中的基本浮动按钮。请查看我的答案。很抱歉给出了简短的描述，但当窗口大小更改时，“完成”和“取消”按钮无法正确调整大小。

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