2017-02-26 83 views
1

所以基本上我想实现一个功能,即当有人访问我的网站时,它会弹出两个选项(选择他们想要的语言)来欢迎他们。当有人进入网站时弹出一个弹出框

这将是这个样子:

Desired output

我不知道我怎么会去这一点,所以有人请让我知道我怎么可能去实现这样的事情?谢谢!

+2

你好,请阅读[?如何我问一个很好的问题(HTTP://计算器.com/help/how-to-ask),对此进行尝试,然后询问您遇到的问题以及您需要帮助的问题。还要将“java”标记更改为“javascript” - 它们是不同的语言并且彼此不相关。 –

+1

预计你至少试图为自己编码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**](http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) ,无论是通过谷歌或通过搜索,尝试和。如果您仍然遇到麻烦,请返回**您的代码**并解释您所尝试的内容。 –

+0

究竟..或者为了帮助你一点,搜索一个“简单的html模式窗口”..这是你需要的。 – MilMike

回答

0

这适用于我。我不知道这是否是最好的方式。

HTML:

<div id="grayout"></div> 
<div id="popup"> 
    <button type="button" id="language1">Language 1</button> 
    <button type="button" id="language2">Language 2</button> 
</div> 
<!-- your page HTML here --> 

CSS:

#grayout { 
     position:fixed; 
     height:100%; 
     width:100%; 
     background-color:rgba(0,0,0,.5); 
    } 
    #popup { 
     position:fixed; 
     height:50%; 
     width:50%; 
     background-color:white; 
     left:25%; 
     top:25%; 
    } 
    #language1 { 
     position:absolute; 
     top:50%; 
     left:25%; 
    } 
    #language2 { 
     position:absolute; 
     top:50%; 
     right:25%; 
    } 

的JavaScript:

document.getElementById('language1').onclick = function() { 
     document.getElementById('popup').style.display = "none"; 
     document.getElementById('grayout').style.display = "none"; 
     //selected language1 code here 
    }; 
    document.getElementById('language2').onclick = function() { 
     document.getElementById('popup').style.display = "none"; 
     document.getElementById('grayout').style.display = "none"; 
     //selected language2 code here 
    };