JS弹出框点击获取值后，自动关闭弹出框，然后刷新页面，文本框里里显示选择的信息。

Posted 2023-05-16

请选择省：文本输入框：(<input id="input_01" type="text" onfocus="allt(this);" />)
点击文本输入框后，弹出
北京 上海 广州…………（一个弹出框）

点击后，比如点击了北京，就会显示：
请选择省：北京
然后还会刷新页面信息，显示与北京有关的信息。

我用的是asp.net，这个弹出框由于在不同页面上都还需要使用，所以我用的是一个
<%@ Register TagPrefix="Ctrl" TagName="ChooseControl" Src="~/controls/ChooseControl.ascx"%>
这样可以在各个页面调用。要怎么做呢？

参考技术A <input type="text" id="tbText" onfocus="javascript:document.getElementById('divValue').style.display='block';" />
<div id="divValue" style="display:none;">
<a href="javascript:void(0);" onclick="javascript:setValue(this);">值一</a><br>
<a href="javascript:void(0);" onclick="javascript:setValue(this);">值二</a><br>
<a href="javascript:void(0);" onclick="javascript:setValue(this);">值三</a><br>
<a href="javascript:void(0);" onclick="javascript:setValue(this);">值四</a><br>
</div>
<script language="javascript">
function setValue(obj)

document.getElementById('tbText').value=obj.innerhtml;
document.getElementById('divValue').style.display='none';

</script>
参考技术B 建议你把北京、上海、广州这些做成链接，点击后跳转到显示相关信息的页面
（你可以在原页面里通过url传参，也可以单独建一个显示信息的页面）
PS：显示“请选择省：北京”这个好像没有必要吧，是业务需求吗？追问

只是举个例子，就像那些团购网，可以切换城市。我的未必就是城市，但是各种显示都是从数据库中读取数据的，所以页面是共用的，如果用链接的话，那不是要做很多个页面，这样页面的重复太多了。

追答

为什么要做很多页面，你可以做一个公用页面，也可以就用原来的页面啊
只要判断url传参就行了

本回答被提问者采纳 参考技术C 我刚刚写好的正在用,不错,不知是不是你想要的.
如文本输入框名为XXX

在FORMLOAD里加入如下代码

Dim str As String = "var ret=window.showModalDialog( 'openwindow.htm','OPENWINDOW','dialogWidth:600px;dialogHeight:400px;center:yes;help:no;status:no;scroll:no;resizable:yes');this.value=(ret==null? ' ':ret);__doPostBack('XXX ','');"
XXX .Attributes.Add("onDblClick ", str)

openwindow.htm中加一个按钮调用如下函数
<script type ="text/javascript" >
function ReturnValue(str)
window.returnValue = str; //返回值
window.close();


</script>

自制弹出框所踩的坑

项目中要做一个弹出框，弹出框里面有一个搜索框，弹出框背后有一个遮罩层，但是layer插件又不能适用中国业务场景，

要求是：点击搜索框本身弹出框不关闭，点击遮罩层阴影部分关闭弹出框

开始想的很简单，只要点击搜索框的父级就可以实现，实际结果是：点击搜索框的时候弹出框全部关闭。

通过思考发现以下方法可以完美解决次问题

                
html
layer 为整个弹出框
search-box 为搜索框
　　　　　　　　　　<div class="layer">
                        <div class="search-box">
                            <img src="img/search.png"/>
                            <input type="text" placeholder="搜索标题、内容"/>
                            <div>搜一下</div>
                        </div>
                </div>

JS   

 $(document).mousedown(function(e){
        if(!$(e.target).is($(‘.search-box‘))&&$(e.target).parent(‘.search-box‘).length===0){
            $(".layer").hide();
            $(‘.search-img‘).show()
        }
    })  

$(e.target) 为鼠标所处位置

$(e.target).parent(‘.search-box‘).length===0) 鼠标所处位置不是搜索框本身

CSS样式也很重要，要把搜索框放在最外层

.layer{
    position: absolute;
    background:rgba(16,15,15,0.5);
    height:924px;
    width: 97.5%;
    padding:30px -30px 30px 30px;
    top:75px;
    display: none;
}

.search-box{
    line-height: 52px;
    height: 52px;
    width:75%;
    position:absolute;
    background: #f5f5f5;
    margin-top:20px;
    margin-left: 30px;
}