dialog弹出div的方法001

最新推荐文章于 2023-02-07 00:41:42 发布
最新推荐文章于 2023-02-07 00:41:42 发布
阅读量3.3k 收藏
点赞数 1
分类专栏： js实用功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g_blue_wind/article/details/51980781
版权

1、页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>兑换列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="static/css/reset.css" type="text/css" rel="stylesheet" />
<link href="static/css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
<%--<script type="text/javascript" src="static/js/jquery.modal.dialog.js"></script>--%>
<script type="text/javascript" src="static/js/jquery.tips.js"></script>
<script>
//打开兑换窗口
var goodsid;
function exchange(id,exchangegift,exchangepoints){
goodsid = id;
$("#ex1").empty();
var html = "";
var openId = $("#openId").val();
var allScore = $("#allScore").val();
html += '<a href="#" rel="dialog:close"></a>'+
       '<ul class="tan_s clearfix">'+
       '<li class="m1"><img src="static/images/jifen-icon9.png"></li>'+
       '<li class="m2"> 当前积分：<span style="font-size:1.4em;">'+allScore+'</span></br>'+
          '兑换<span>'+exchangegift+'</span>将消耗您<span>'+exchangepoints+'</span>积分 </li>'+
     '</ul>'+
     '<ul class="tan_x">'+
       '<li class="x1"><img src="static/images/jifen-icon10.jpg"></li>'+
       '<li class="x2">'+
         '<input type="text" id="phone" maxlength="11"/>'+
       '</li>'+
       '<li class="x3"><a οnclick="change()">更换号码</a></li>'+
     '</ul>'+
      '<div class="dh_top">'+
   '<ul>'+
     '<li class="dh1">'+
       '<input type="checkbox" id="rule" οnclick="checkbox()"/>'+
     '</li>'+
     '<li class="">我已阅读并同意兑换规则</li>'+
   '</ul>'+
   '</div>'+
     '<div class="tan_dui"><a  style="background:#EEE" id="closedialog" οnclick="exchange2('+allScore+','+exchangepoints+')">立即兑换</a> </div>';
$("#ex1").append(html);  
}
//验证
function check(){
if($("#rule").is(":checked")==false){
/*$("#rule").tips({
side:3,
           msg:'请仔细阅读兑换规则',
           bg:'#AE81FF',
           time:2
       });*/
     $("#closedialog").attr("disabled",$("#rule").is(":checked")==false);
return false;
}
if(($("#phone").val()=="")){
$("#phone").tips({
side:3,
           msg:'电话号码不能为空',
           bg:'#AE81FF',
           time:2
       });
$("#phone").focus();
return false;
}
var phoneNumReg = /(^[0-9]{3,4}\-{0,1}[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
if(!phoneNumReg.test($("#phone").val())){
$("#phone").tips({
side:3,
           msg:'请填写正确的电话号码',
           bg:'#AE81FF',
           time:2
       });
return false;
}
return true;
}
</script>
</head>
<body style="background:#fff;">
<input value="${pd.openId }" id="openId" type="hidden">
<input value="${allScore }" id="allScore" type="hidden">
<div class=" duihuan">
  <div class="dh_banner"> <img src="static/images/jifen-img3.jpg"> </div>
  <div class="dh_jifen"> 当前积分：
    <p>${allScore }<span>积分</span></p>
  </div>
  <div class="dh_list">
    <ul>
    <c:forEach items="${varList}" var="var" varStatus="vs">
      <li><a id="diag" οnclick="exchange('${var.id }','${var.exchangegift}','${var.exchangepoints}')" href="#ex1"  rel="dialog:open"><img src="${var.pic}"></a>
      </li>
      </c:forEach>
     </ul>
   </div>
   <div id="ex1"  class="dh_top_tan" style ="display:none"></div>
  </div>
</div>
<!--duihuan  ed-->
</body>
</html>



2、jquery.modal.dialog.js

/*
    A simple jQuery modal dialog (https://github.com/hinet/jquery.modal.dialog)
    Version 0.5.6
*/
(function($) {


  var current = null;


  $.dialog = function(el, options) {
    $.dialog.close(); // Close any open dialogs.
    var remove, target;
    this.$body = $('body');
    this.options = $.extend({}, $.dialog.defaults, options);
    this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
    if (el.is('a')) {
      target = el.attr('href');
      //Select element by id from href
      if (/^#/.test(target)) {
        this.$elm = $(target);
        if (this.$elm.length !== 1) return null;
        this.open();
      //AJAX
      } else {
        this.$elm = $('<div>');
        this.$body.append(this.$elm);
        remove = function(event, dialog) { dialog.elm.remove(); };
        this.showSpinner();
        el.trigger($.dialog.AJAX_SEND);
        $.get(target).done(function(html) {
          if (!current) return;
          el.trigger($.dialog.AJAX_SUCCESS);
          current.$elm.empty().append(html).on($.dialog.CLOSE, remove);
          current.hideSpinner();
          current.open();
          el.trigger($.dialog.AJAX_COMPLETE);
        }).fail(function() {
          el.trigger($.dialog.AJAX_FAIL);
          current.hideSpinner();
          el.trigger($.dialog.AJAX_COMPLETE);
        });
      }
    } else {
      this.$elm = el;
      this.$body.append(this.$elm);
      this.open();
    }
  };


  $.dialog.prototype = {
    constructor: $.dialog,


    open: function() {
      var m = this;
      if(this.options.doFade) {
        this.block();
        setTimeout(function() {
          m.show();
        }, this.options.fadeDuration * this.options.fadeDelay);
      } else {
        this.block();
        this.show();
      }
      if (this.options.escapeClose) {
        $(document).on('keydown.dialog', function(event) {
          if (event.which == 27) $.dialog.close();
        });
      }
      if (this.options.clickClose) this.blocker.click($.dialog.close);
    },


    close: function() {
      this.unblock();
      this.hide();
      $(document).off('keydown.dialog');
    },


    block: function() {
      var initialOpacity = this.options.doFade ? 0 : this.options.opacity;
      this.$elm.trigger($.dialog.BEFORE_BLOCK, [this._ctx()]);
      this.blocker = $('<div class="jquery-dialog blocker"></div>').css({
        top: 0, right: 0, bottom: 0, left: 0,
        width: "100%", height: "100%",
        position: "fixed",
        zIndex: this.options.zIndex,
        background: this.options.overlay,
        opacity: initialOpacity
      });
      this.$body.append(this.blocker);
      if(this.options.doFade) {
        this.blocker.animate({opacity: this.options.opacity}, this.options.fadeDuration);
      }
      this.$elm.trigger($.dialog.BLOCK, [this._ctx()]);
    },


    unblock: function() {
      if(this.options.doFade) {
        this.blocker.fadeOut(this.options.fadeDuration, function() {
          $(this).remove();
        });
      } else {
        this.blocker.remove();
      }
    },


    show: function() {
      this.$elm.trigger($.dialog.BEFORE_OPEN, [this._ctx()]);
      if (this.options.showClose) {
        this.closeButton = $('<a href="#close-dialog" rel="dialog:close" class="close-dialog ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
        this.$elm.append(this.closeButton);
      }
      this.$elm.addClass(this.options.dialogClass + ' current');
      this.center();
      if(this.options.doFade) {
        this.$elm.fadeIn(this.options.fadeDuration);
      } else {
        this.$elm.show();
      }
      this.$elm.trigger($.dialog.OPEN, [this._ctx()]);
    },


    hide: function() {
      this.$elm.trigger($.dialog.BEFORE_CLOSE, [this._ctx()]);
      if (this.closeButton) this.closeButton.remove();
      this.$elm.removeClass('current');


      if(this.options.doFade) {
        this.$elm.fadeOut(this.options.fadeDuration);
      } else {
        this.$elm.hide();
      }
      this.$elm.trigger($.dialog.CLOSE, [this._ctx()]);
    },


    showSpinner: function() {
      if (!this.options.showSpinner) return;
      this.spinner = this.spinner || $('<div class="' + this.options.dialogClass + '-spinner"></div>')
        .append(this.options.spinnerHtml);
      this.$body.append(this.spinner);
      this.spinner.show();
    },


    hideSpinner: function() {
      if (this.spinner) this.spinner.remove();
    },


    center: function() {
      this.$elm.css({
        position: 'fixed',
        top: "50%",
        left: "50%",
        marginTop: - (this.$elm.outerHeight() / 2),
        marginLeft: - (this.$elm.outerWidth() / 2),
        zIndex: this.options.zIndex + 1
      });
    },


    //Return context for custom events
    _ctx: function() {
      return { elm: this.$elm, blocker: this.blocker, options: this.options };
    }
  };


  //resize is alias for center for now
  $.dialog.prototype.resize = $.dialog.prototype.center;


  $.dialog.close = function(event) {
    if (!current) return;
    if (event) event.preventDefault();
    current.close();
    var that = current.$elm;
    current = null;
    return that;
  };


  $.dialog.resize = function() {
    if (!current) return;
    current.resize();
  };


  // Returns if there currently is an active dialog
  $.dialog.isActive = function () {
    return current ? true : false;
  }


  $.dialog.defaults = {
    overlay: "#000",
    opacity: 0.4,
    zIndex: 1000,
    escapeClose: true,
    clickClose: true,
    closeText: 'Close',
    closeClass: '',
    dialogClass: "dialog",
    spinnerHtml: null,
    showSpinner: true,
    showClose: true,
    fadeDuration: null,   // Number of milliseconds the fade animation takes.
    fadeDelay: 1.0        // Point during the overlay's fade-in that the dialog begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
  };


  // Event constants
  $.dialog.BEFORE_BLOCK = 'dialog:before-block';
  $.dialog.BLOCK = 'dialog:block';
  $.dialog.BEFORE_OPEN = 'dialog:before-open';
  $.dialog.OPEN = 'dialog:open';
  $.dialog.BEFORE_CLOSE = 'dialog:before-close';
  $.dialog.CLOSE = 'dialog:close';
  $.dialog.AJAX_SEND = 'dialog:ajax:send';
  $.dialog.AJAX_SUCCESS = 'dialog:ajax:success';
  $.dialog.AJAX_FAIL = 'dialog:ajax:fail';
  $.dialog.AJAX_COMPLETE = 'dialog:ajax:complete';


  $.fn.dialog = function(options){
    if (this.length === 1) {
      current = new $.dialog(this, options);
    }
    return this;
  };


  // Automatically bind links with rel="dialog:close" to, well, close the dialog.
  $(document).on('click.dialog', 'a[rel="dialog:close"],button[rel="dialog:close"]', $.dialog.close);
  $(document).on('click.dialog', 'a[rel="dialog:open"]', function(event) {
    event.preventDefault();
    $(this).dialog();
  });
})(jQuery);




























g_blue_wind
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery Dialog 弹出层对话框插件
12-10
原理很简单，通过JS动态构建一个div层，将其插入到body中，然后...– 对话框 –> <div class=”dialog”> <div class=”bar”> ”title”>标题</span> [关闭]</a> </div> <div class=”content”>内容部分</div> </d
artDialog使用说明（弹窗API）
weixin_30721899的博客
12-22 352
Js代码 2. 传入HTMLElement 备注：1、元素不是复制而是完整移动到对话框中，所以原有的事件与属性都将会保留2、如果隐藏元素被传入到对话框，会设置display:block属性显示该元素3、对话框关闭的时候元素将恢复到原来在页面的位置，styledisplay属性也将恢复 **************************************...
jquery easyui dialog的几个使用问题
bbrruucc的博客
09-15 562
jquery easyui dialog可以两种方式使用 1)定义div,使用iframe 需要显示dialog时使用以下2行即可 $('#openXXXIframe')[0].src='xxxEdit.action'; $('#openRoleDiv').dialog('open'); 2)不使用iframe(请参见easyui的demo) Dia...
JavaScript 练手小技巧：HTML5 的 dialog 标签制作对话框
九天翔龙的技术博客
02-07 6839
对话框，在应用中常常用来做（如，登录、删除信息等）。
art.dialog.open用法
热门推荐
炉火纯青
05-20 3万+
<br /><a href="###"  onclick="javascript:art.dialog.open('reg.php',{id:'memdiv',width :900,height:500,title:'注册'})">会员注册</a>
lhgDialog JS弹出窗口源代码
03-18
lhgdialog是一功能强大的简单迷你并且高效的弹出窗口组件。 专为大型弹出窗口定制 相对于网上其它弹出窗口组件主要功能是提示信息来说，本组件主要是用来制作窗口中内容较多，页面比较复杂的窗口。本组件的窗口内容...
jQuery Dialog 弹出层案例
08-22
jQuery Dialog 弹出层案例,页面代码已经改写，引入js和css页面添加一个div即可。下载包里面有案例
父页面显示遮罩层弹出半透明状态的dialog
12-03
dialog即弹出的子页面，div。 效果图如下： 具体代码实现如下： 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE> New Document </...
DIV+CSS+JS 变灰弹出层
12-10
浮动层居中的对话框效果演示 ...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.
菜鸟笔记之---js div 弹出层
u010321537的博客
08-14 522
js 弹出div层
jquery ui dialog弹出div层对话框
u011927449的博客
07-11 445
jquery ui弹出div层对话框,效果预览:http://keleyi.com/keleyi/phtml/jui/dialog/index.htm以下是完整代码，保存到html文件，打开也可以预览效果： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://
把vue组件添加到body下
weixin_30767835的博客
05-25 6899
写了个batman-active-panel组件 为了减少父级html的影响，需要把组件的$el放在body下 在mounted放法中写： this.$nextTick(() => { const body = document.querySelector("body"); if (body.append) { body...
Vue 组件中 移动 this.$el 的注意事项
weixin_30900589的博客
07-13 1250
比如， mounted () { document.body.appendChild(this.$el); // insertAdjacentElement // insertBefore}, 这几行代码会导致 dom 元素位置 与 VNode 期望的位置不一致 比如： --------------------------------------- 父组件： ...
弹出层 div dialog
10-15 5874
弹出层 div dialog
JSP中JQuery UI Dialog弹窗使用具体操作
can8888的博客
06-15 2416
本文简单介绍了JQuery-UI-Dialog弹窗的使用方法。
el-dialog弹出层组件
最新发布
11-22
el-dialog是一个基于Element UI的弹出层组件，可以用于显示对话框、提示框、操作确认框等。它具有以下特点： - 可以自定义标题、内容、按钮等。 - 可以设置弹出层的大小、位置、遮罩层等样式。 - 可以通过v-model控制弹出层的显示和隐藏。 - 可以通过slot插槽自定义弹出层的内容。 以下是el-dialog的基本使用方法： 1. 引入Element UI库和样式文件 ```html <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 2. 创建Vue实例，并注册el-dialog组件 ```javascript Vue.component('el-dialog', ElementUI.Dialog); ``` 3. 在Vue实例中使用el-dialog组件 ```html <template> <div> <el-button @click="dialogVisible = true">打开弹出层</el-button> <el-dialog v-model="dialogVisible" title="提示" :modal-append-to-body="false"> <p>这是弹出层的内容</p> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> new Vue({ el: '#app', data: { dialogVisible: false } }); </script> ``` 在上面的代码中，el-button是一个Element UI的按钮组件，@click="dialogVisible = true"表示点击按钮时将dialogVisible设置为true，从而显示弹出层。el-dialog是一个Element UI的弹出层组件，v-model="dialogVisible"表示控制弹出层的显示和隐藏，title="提示"表示弹出层的标题，:modal-append-to-body="false"表示不将遮罩层插入到body元素中。在el-dialog中，p标签中的内容是弹出层的主体内容，slot="footer"表示自定义弹出层的底部按钮区域，el-button是Element UI的按钮组件，@click="dialogVisible = false"表示点击按钮时将dialogVisible设置为false，从而隐藏弹出层。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值