浮动层居中的弹出对话框效果例

最新推荐文章于 2024-08-22 11:40:47 发布
最新推荐文章于 2024-08-22 11:40:47 发布
阅读量96 收藏
点赞数
文章标签： function div null scroll class html

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>浮动层居中的对话框效果演示</TITLE>

<STYLE type=text/css>
HTML {
 HEIGHT: 100%
}
BODY {
 HEIGHT: 100%
}
BODY {
 FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif
}
DIV.neat-dialog-cont {
 Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT:

100%
}
DIV.neat-dialog-bg {
 Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-

COLOR: #eee; opacity: 0.7
}
DIV.neat-dialog {
 BORDER-RIGHT: #444 1px solid; BORDER-TOP: #444 1px solid; Z-INDEX: 99; MARGIN-LEFT: auto; BORDER-LEFT: #444 1px solid;

WIDTH: 30%; MARGIN-RIGHT: auto; BORDER-BOTTOM: #444 1px solid; POSITION: relative; TOP: 25%; BACKGROUND-COLOR: #fff
}
DIV.neat-dialog-title {
 PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em;

PADDING-TOP: 0.1em; BORDER-BOTTOM: #444 1px solid; POSITION: relative
}
IMG.nd-cancel {
 RIGHT: 0.2em; POSITION: absolute; TOP: 0.2em
}
DIV.neat-dialog P {
 PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center
}

</STYLE>

<SCRIPT type=text/javascript>
function NeatDialog(sHTML, sTitle, bCancel)
{
  window.neatDialog = null;
  this.elt = null;
  if (document.createElement  &&  document.getElementById)
  {
    var dg = document.createElement("div");
    dg.className = "neat-dialog";
    if (sTitle)
      sHTML = '<div class="neat-dialog-title">'+sTitle+
              ((bCancel)?
                '<img src="x.gif" alt="Cancel" class="nd-cancel" />':'')+
                '</div>/n' + sHTML;
    dg.innerHTML = sHTML;

    var dbg = document.createElement("div");
    dbg.id = "nd-bdg";
    dbg.className = "neat-dialog-bg";

    var dgc = document.createElement("div");
    dgc.className = "neat-dialog-cont";
    dgc.appendChild(dbg);
    dgc.appendChild(dg);

    //adjust positioning if body has a margin
    if (document.body.offsetLeft > 0)
      dgc.style.marginLeft = document.body.offsetLeft + "px";

    document.body.appendChild(dgc);
    if (bCancel) document.getElementById("nd-cancel").onclick = function()
    {
      window.neatDialog.close();
    };
    this.elt = dgc;
    window.neatDialog = this;
  }
}
NeatDialog.prototype.close = function()
{
  if (this.elt)
  {
    this.elt.style.display = "none";
    this.elt.parentNode.removeChild(this.elt);
  }
  window.neatDialog = null;
}

function openDialog()
  {

var sHTML =
      '<p><button οnclick="window.neatDialog.close()">关闭!</button></p>';
    new NeatDialog(sHTML, "欢迎光临!", false);
 
}
 
</SCRIPT>
<BODY>
<H1>浮动层居中的对话框效果演示</H1>
<BUTTON οnclick="openDialog()">演示层提示效果</BUTTON>
</BODY></HTML>

 

gaoyusi4964238
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹出层效果（源代码）
06-22
在IT行业中，弹出层效果是一种常见的用户界面设计元素，用于在用户与网站或应用程序交互时显示额外的信息或功能。这种效果通常用于显示警告、确认对话框、模态窗口、下拉菜单等。本资源提供的“弹出层效果（源代码）...
弹出层居中
08-03
标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题，特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中，"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...
浮动层居中的对话框效果演示
weixin_34378922的博客
08-01 100
Code <HTML> <HEAD> <TITLE>浮动层居中的对话框效果演示</TITLE> <STYLEtype="text/css"> BODY{ FONT-SIZE:14px;FONT-FAMILY:Tahoma,Verdana,sans-serif } DIV.neat-dialog-cont{...
div 浮动对话框 兼容ie,ff
weixin_30399871的博客
08-26 49
JS: function Tong_MoveDiv() { //参数说明 // id 要移动的层ID // Evt 是 event, window.event; 要在FF 中可以用 e ? e :window.event; // T 为 int 有数字是拖动 没有是变大小 this.Move=function(Id,Evt,T) { ...
【小程序】如何实现从底部弹出对话框
老梁的专栏
06-29 2584
手动实现一个从底部弹出对话框的小程序组件（带动画）
JS弹出居中的DIV的代码
10-30
这段代码中，当点击按钮时，会调用`divcenter()`函数，显示并居中弹出层。同时，通过在`body`标签上设置`onresize`和`onscroll`事件，确保在窗口大小改变或滚动时，弹出层始终居中。 需要注意的是，这种方法在滚动...
弹出登录框的JQuery弹出浮动层
04-04
"弹出登录框的JQuery弹出浮动层"就是一种常见的交互设计手法，它允许用户在不离开当前页面的情况下进行登录操作，提高了用户体验。JQuery，一个强大的JavaScript库，使得实现这样的功能变得更加简单。接下来，我们将...
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
12-11
在网页设计中，有时我们需要创建一个遮罩层和居中弹出层，以便在用户与页面交互时显示重要信息或提示。这篇文档介绍了一个使用JavaScript（JS）和Cascading Style Sheets（CSS）来实现这样的功能的方法。这个实现的...
html转vue项目
qq_38880880的博客
08-19 321
总结来说，将HTML代码转换为Vue需要引入Vue框架并编写Vue组件，使用Vue的数据绑定和事件绑定语法实现页面的动态更新。当我们点击"Change Name"按钮时，changeName方法会被调用，将name属性的值改为"Vue.js"。在Vue的data选项中，我们定义了一个name属性，并将其初始值设为"Vue"。除了简单的数据绑定和事件绑定外，Vue还提供了丰富的指令和组件库，用于构建更复杂的用户界面。通过使用这些特性，我们可以将HTML代码转换为更加动态和交互的Vue应用。
响应式Web设计：纯HTML和CSS的实现技巧
vvvae1234的博客
08-18 760
互联网已经成为人们日常生活中不可或缺的一部分，随着移动设备的普及，用户访问网站的方式也发生了巨大变化。因此，响应式Web设计（Responsive Web Design, RWD）应运而生。它的目标是使Web页面能够根据不同设备屏幕的大小和分辨率自动调整布局，以提供最佳的用户体验。本文将深入探讨响应式Web设计的基本概念、实现技巧，并通过实际操作案例来展示如何使用纯HTML和CSS构建一个响应式网页。
理解现代前端开发：从HTML到React的进化之路
qq_62512874的博客
08-18 717
随着互联网的不断发展，前端开发已经经历了从静态页面到复杂单页应用（SPA）的转变。作为前端开发者，我们需要不断更新知识，掌握最新的技术栈，以应对日益复杂的开发需求。本篇文章将带你从前端的基础知识逐步深入，探索现代前端开发的关键技术，包括HTML、CSS、JavaScript，以及流行的框架如React。前端开发是一个不断演进的领域，新的工具和框架层出不穷。通过不断学习和实践，我们可以掌握最新的前端技术，构建高效、美观且功能丰富的现代Web应用。
Java学习Day33：HTML 第三章：挟魂崖
weixin_51721783的博客
08-21 715
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。1、什么是dom？dom，全称Document Object Model文档对象模型，是 W3C 的标准；[所有浏览器公共遵守的标准]。用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。2、dom组成：由HTML、CSS、事件（交互）组成。
原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列
最新发布
lulei5153的博客
08-22 159
当用户修改某个字段（等级、命座、天赋）时，不仅更新当前表格的数据，还会找到另一个表格中对应的角色，并更新其数据。最后，重新渲染两个表格以显示最新的数据。这样可以确保两个表格的数据始终保持一致。
响应式 Web 设计：纯 HTML 和 CSS 的实现技巧
windowshht的博客
08-22 657
响应式 Web 设计是现代网页开发的重要组成部分，能够为用户提供一致的体验。通过使用纯 HTML 和 CSS，您可以实现灵活的布局、适应不同设备的图像和样式。本文介绍的技巧和示例将帮助您在项目中有效地应用响应式设计。希望您能在实践中不断探索和优化，创造出更好的用户体验。如需深入了解响应式设计的更多内容，建议参考相关书籍和在线资源，持续学习和实践。
【HTML】从0开始构建HTML页面
weixin_51649465的博客
08-20 932
在网页中小图片或网页基本元素如图标、按钮等考虑使用GIF或PNG-8格式图像，半透明图像考虑使用真色彩PNG格式（一般指PNG32），色彩丰富的图片则考虑使用JPG格式，动态图片可以考虑使用GIF格式。
Java学习Day31：HTML 第一章：观音禅院
weixin_51721783的博客
08-20 2332
单词> ：元素标签 ：首先中至少有两个单词，那第一个肯定是元素标签，元素标签后跟的都是属性标签。
Android studio 新建日程弹出对话框。对话框单选四个选项，左边底部取消，右边确定。选择一个选项后，该选项会浮动显示在底部
03-27
的文本框中。 实现思路： 1. 在布局文件中定义一个LinearLayout，设置orientation为vertical，作为整个对话框的容器。 2. 在LinearLayout中添加一个TextView，用于显示日程选项。 3. 在LinearLayout中添加四个RadioButton，分别表示四个日程选项。 4. 在LinearLayout中添加一个RadioGroup，将四个RadioButton放入其中，设置为单选。 5. 在LinearLayout中添加一个HorizontalLinearLayout，用于显示取消和确定按钮。 6. 在HorizontalLinearLayout中添加一个Button，用于取消操作，设置为左对齐。 7. 在HorizontalLinearLayout中添加一个Button，用于确定操作，设置为右对齐。 8. 在Activity中，使用AlertDialog.Builder创建一个对话框，将布局文件设置为对话框的视图。 9. 在AlertDialog.Builder中设置对话框的标题、图标等属性。 10. 在AlertDialog.Builder中设置对话框的取消按钮和确定按钮的点击事件，分别对应取消操作和确定操作。 11. 在确定按钮的点击事件中，获取选中的RadioButton的文本内容，并将其显示在底部的文本框中。 示例代码： 布局文件： ``` <LinearLayout android:id="@+id/dialog_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="16dp"> <TextView android:id="@+id/textview" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="请选择日程：" /> <RadioGroup android:id="@+id/radiogroup" android:layout_width="match_parent" android:layout_height="wrap_content"> <RadioButton android:id="@+id/radio1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="日程1" /> <RadioButton android:id="@+id/radio2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="日程2" /> <RadioButton android:id="@+id/radio3" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="日程3" /> <RadioButton android:id="@+id/radio4" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="日程4" /> </RadioGroup> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/black" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="end" android:gravity="center_vertical" android:orientation="horizontal" android:paddingTop="16dp" android:paddingBottom="16dp"> <Button android:id="@+id/btn_cancel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="取消" android:textColor="@color/black" /> <View android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/black" /> <Button android:id="@+id/btn_ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="确定" android:textColor="@color/black" /> </LinearLayout> </LinearLayout> ``` Activity代码： ``` public class MainActivity extends AppCompatActivity { private TextView mTextView; private Button mBtnCancel; private Button mBtnOk; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTextView = findViewById(R.id.textview); mBtnCancel = findViewById(R.id.btn_cancel); mBtnOk = findViewById(R.id.btn_ok); mTextView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showSelectDialog(); } }); } private void showSelectDialog() { View dialogView = LayoutInflater.from(this).inflate(R.layout.dialog_layout, null); final RadioGroup radioGroup = dialogView.findViewById(R.id.radiogroup); AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setView(dialogView) .setTitle("选择日程") .setIcon(R.mipmap.ic_launcher) .setNegativeButton("取消", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }) .setPositiveButton("确定", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { int checkedId = radioGroup.getCheckedRadioButtonId(); RadioButton radioButton = radioGroup.findViewById(checkedId); String text = radioButton.getText().toString(); mTextView.setText(text); } }); AlertDialog dialog = builder.create(); dialog.show(); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值