本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单 进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

1. 背景

Window对象即浏览器窗口对象,提供了很多实用的属性和方法,也包含多种交互的对话框。


一般开发人员习惯上使用UI框架提供的弹窗,能够提供更加精美的样式,而且在各个浏览器下表现一致。


其实Window对象自带的对话框功能还算比较丰富,也算是一种可行的选择,本篇就来具体了解下。


2. alert提示框

window.alert方法用来显示一个提示框,该方法没有返回值,注意弹窗后脚本将被阻塞,直到用户点击确定后才执行后面的脚本。


<button type="button" onclick="alertClick()">alert</button>

<script>

function alertClick() {

alert("你好");

}

</script>


效果:

image.png

3. confirm确认框

window.confirm用于弹出一个确认框,同样会阻塞后面的脚本执行,直到点击确认后者取消。


confirm方法会返回布尔值,表示用户点击的结果,代码如下:


<button type="button" onclick="confirmClick()">confirmClick</button>

<script>

function confirmClick() {

var result = confirm("您确认要删除吗,一旦删除不可恢复");

alert("选择结果:" + result);

}

</script>


效果如下:

image.png

image.png

4. prompt输入框

prompt输入框可以用来供用户在弹窗中输入一些内容,返回值即为用户输入内容。


<button type="button" onclick="promptClick()">promptClick</button>

<script>

function promptClick() {

var result = prompt("请输入姓名", "张三");

alert("输入内容为:" + result);

}

</script>


注意prompt方法的第一个参数表示输入提示,第二个参数为输入的默认值,所以效果如下:

image.png

还有一点,如果点击取消,则返回值为null。


5. showModalDialog弹窗

showModalDialog可以弹出指定URL的弹窗。


<button type="button" onclick="showModalDialogClick()">showModalDialogClick</button>

<script>

function showModalDialogClick() {

showModalDialog("http://www.baidu.com");

}

</script>


这个用的比较少,大家知道有这个方法即可。


6. 小结

其实Window对象提供了非常全面的功能,我们使用的很多前端框架,无非就是在文档对象模型、浏览器对象模型基础上开发的,适当的了解Window和Document对象的功能及方法,能够加深我们对浏览器的理解。

ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
ApeForms一款基于WinForm实现的开源免费商用的UI库,其中提供了一套便于用户交互的临时对话框组件(Dialog),可用于快速创建开发中常见的交互对话框,例如:消息框、提示框、输入框、单选框、多选框等。 ApeFree.ApeDialogs并不是一个包含Dialog实现的UI库,而是一套Dialog标准(提供了一套临时弹出对话框的实现标准)。 Dialog是界面开发过程中必不可少的组件,无论是桌面开发、Web前端开发、移动端开发,甚至命令行应用程序中的一次“Yes or No”的输入都可以看做是一次Dialog弹框。
原文:【WPF】点击滑动条(Slider),移动滑块(Tick)到鼠标点击的位置 问题:点击Slider控件时,滑块会自动跳到滑动条的最边缘位置,无法跳到鼠标点击的位置上。 办法:给Slider控件设置属性IsMoveToPointEnabled="True"即可! https://stackoverflow.