点击弹出一个div并显示在鼠标右下方

//在鼠标显示一个层,该层的内空为div2的内容
function showTip(img){
    $("#img_gis").attr("src","../../JS/StreetMap/gisPicture/"+img);
    var div3 = document.getElementById('div3'); //将要弹出的层
    div3.style.display="block"; //div3初始状态是不可见的,设置可为可见
//window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
    div3.style.left=event.clientX+10; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
    div3.style.top=event.clientY+5;
    div3.style.position="absolute"; //必须指定这个属性,否则div3层无法跟着鼠标动
    var div2 =document.getElementById('div2');
    div3.innerHTML=div2.innerHTML;
}
//关闭层div3的显示
function closeTip(){
    var div3 = document.getElementById('div3');
    div3.style.display="none";
}


//控制层div2显示的开关
function switchDIV(){
    if(div2.style.display=='block'){
        div2.style.display='none';
    }
    else{
        div2.style.display='block';
    }

}






        <div id="div2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <img style="width:200;height:175" id="img_gis" src="">
        </div>


         <div id="div3"  style="display:none;width:300;height:175"></div>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,可以使用Vue的v-if指令和一个Boolean类型的数据来实现点按钮一个div窗体的效果。 具体实现步骤如下: 1. 在Vue实例中定义一个Boolean类型的数据,例如isShow,初始值为false,表示窗默认不显示。 2. 在模板中使用v-if指令绑定isShow数据,当isShow为true时,显示。 3. 在按钮上使用@click事件绑定一个方法,例如showPopup,当按钮被点时,调用showPopup方法。 4. 在showPopup方法中,改变isShow的值为true,显示。 5. 在窗的关闭按钮上使用@click事件绑定一个方法,例如hidePopup,当关闭按钮被点时,调用hidePopup方法。 6. 在hidePopup方法中,改变isShow的值为false,窗关闭。 示例代码如下: ``` <template> <div> <button @click="showPopup">点窗</button> <div class="popup" v-if="isShow"> <div class="popup-content"> <h2>窗标题</h2> <p>窗内容</p> <button @click="hidePopup">关闭窗</button> </div> </div> </div> </template> <script> export default { data() { return { isShow: false } }, methods: { showPopup() { this.isShow = true }, hidePopup() { this.isShow = false } } } </script> <style> .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; } .popup-content { background-color: #fff; padding: 20px; border-radius: 5px; } </style> ``` 这是一个简单的实现,你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值