js点击弹出悬浮表单

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js点击弹出悬浮表单相关的知识，希望对你有一定的参考价值。

参考技术A 表单的位置大小需要你用CSS设计。以下代码只是实现了你要的弹出功能。
<!DOCTYPE html>

HTML模板

<br /> form<br /> position:absolute;<br /> left:100px;<br /> top:50px;<br /> width:400px;<br /> height:300px;<br /> border:1px solid #aaaaaa<br /> <br />

<br /> var t;<br /> function closeForm()<br /> var form=document.getElementById("form");<br /> form.style.display="none";<br /> <br /> function showForm()<br /> var form=document.getElementById("form");<br /> form.style.display="block";<br /> window.clearTimeout(t);<br /> <br /> function timer()<br /> t=window.setTimeout(showForm,10000);<br /> <br />

javascript 调用谷歌地图API 输入地址 点击弹出悬浮信息

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
    <script type="text/javascript"    
        src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>    
    <script type="text/javascript">    
        var geocoder;    
        var map;    
        //实际查询地址    
        //var query = "辽宁沈阳文化路三号巷11号";    
        //var query = "东北大学北门";    
        //显示名称    
        //var display = "<b>单位: </b>东北大学";    
        function initialize() {    
            geocoder = new google.maps.Geocoder();    
            var myOptions = {    
                zoom : 17,//缩放比例    
                //地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE     
                //•MapTypeId.HYBRID •MapTypeId.TERRAIN     
                mapTypeId : google.maps.MapTypeId.ROADMAP    
            }    
            map = new google.maps.Map(document.getElementById("map_canvas"),    
                    myOptions);    
            codeAddress();    
        }    
        function codeAddress() {    
            var address = document.getElementById("address").value;;    
            //地址解析    
            geocoder.geocode({    
                ‘address‘ : address    
            }, function(results, status) {    
                if (status == google.maps.GeocoderStatus.OK) {    
                    //依据解析的经度纬度设置坐标居中    
                    map.setCenter(results[0].geometry.location);    
                    var marker = new google.maps.Marker({    
                        map : map,    
                        position : results[0].geometry.location,    
                        title : address,    
                        //坐标动画效果    
                        animation : google.maps.Animation.DROP    
                    });    
                    var display = "地址: " + results[0].formatted_address;  
                    var infowindow = new google.maps.InfoWindow({    
                        content : "<span style=‘font-size:11px‘><b>名称: </b>"    
                                + address + "<br>" + display + "</span>",    
                        //坐标偏移量，一般不用修改    
                        pixelOffset : 0,    
                        position : results[0].geometry.location    
        
                    });    
                    //默认打开信息窗口,点击做伴弹出信息窗口    
                    infowindow.open(map, marker);    
                    google.maps.event.addListener(marker, ‘click‘, function() {    
                        infowindow.open(map, marker);    
                    });    
                } else {    
                    alert("Geocode was not successful for the following reason: " + status);    
                }    
            });    
        }    
    </script>    
  
</head>  
  
  
<body>  
 <body onload="initialize()">  
        <div id="map_canvas" style="width: 320px; height: 480px;"></div>  
 <div>  
    <input id="address" type="textbox" value="北京">  
    <input type="button" value="Encode" onclick="codeAddress()">  
  </div>  
    </body>  
</body>  
</html>

 

以上是关于js点击弹出悬浮表单的主要内容，如果未能解决你的问题，请参考以下文章

js5

前端Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写Dialog对话框弹出

VUE基础：循环、判断、点击事件及表单验证双向绑定

怎么写程序使提交表单后弹出框显示成功或失败，页面不跳转？

Jeecg-Boot 表单之自定义按钮和Sql增强

Jquery移动弹出表单未提交或触发点击