div+js写弹出框
生活随笔
收集整理的這篇文章主要介紹了
div+js写弹出框
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本意是想重寫alert方法，折騰了半天沒(méi)有成果，然后想著用div寫個(gè)彈出框，效果是實(shí)現(xiàn)了，但是彈出框是不能拖動(dòng)的，還有一個(gè)問(wèn)題是就算能拖動(dòng)，關(guān)閉按鈕不能隨彈出框移動(dòng)，它的位置是寫死的
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery.js"></script> <title>js寫彈出框</title> <style>body {height: 100%;overflow: auto;margin: 0;}#div_Test {position: fixed;_position: absolute;top: 50%;left: 50%;border: 2px solid #C0C0C0;/*彈出框邊框樣式*/background-color: #FFFFFF;/*彈出框背景色*/display:none;width:400px;height:200px;font-size：10px}* html {overflow: hidden;position: absolute;}#close{background-color:#FFF;position:fixed;bottom:40%;left:50%;right:5%;} </style><script type="text/javascript">//彈出層 function show_Win(div_Win, tr_Title, event) {var s_Width = document.documentElement.scrollWidth; //滾動(dòng) 寬度var s_Height = document.documentElement.scrollHeight; //滾動(dòng) 高度var js_Title = $("title"); //標(biāo)題js_Title.css("cursor", "move");//創(chuàng)建遮罩層$("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");//獲取彈出層var msgObj = $("#" + div_Win);msgObj.css('display', 'block'); //必須先彈出此行，否則msgObj[0].offsetHeight為0，因?yàn)?#34;display":"none"時(shí)，offsetHeight無(wú)法取到數(shù)據(jù)；如果彈出框?yàn)閠able，則為'',如果為div，則為block，否則textbox長(zhǎng)度無(wú)法充滿td//y軸位置var js_Top = -parseInt(msgObj.height()) / 2 + "px";//x軸位置var js_Left = -parseInt(msgObj.width()) / 2 + "px";msgObj.css({ "margin-left": js_Left, "margin-top": js_Top });//使彈出層可移動(dòng)//msgObj.draggable({ scroll: true});//Mover(msgObj)$(document).ready(function(){$("#div_Test").click(function(){$("#title").css("color","red");});}); }$(document).ready(function(){$("#close").click(function(){$("#div_Test").hide();});}); </script> </head> <body> <input id="bb" type="button" value="測(cè)試彈出框" onclick="show_Win('div_Test', 'title', event)" /><div id="div_Test"><div id="title" style="border: 1px solid #f0f0f0;font-size:20;text-align:center">標(biāo)題</div>內(nèi)容<input id="close" type="button" value="關(guān)閉" /></div> </body> </html>還有一個(gè)問(wèn)題：如何在html中獲取input輸入框的輸入值
var name = $("#name").val();
?
一個(gè)輸入框?yàn)榭诊@示提示語(yǔ)的例子
<body> <div id="main">主要內(nèi)容展示區(qū)</div> <input type="text" id="name" onblur='test()'> <div id='alert'></div> </body> <script type="text/javascript"> function test(){//$('.loading-gif').show();//$('#main').hide();var name = $("#name").val();if(name == ""){$("#alert").html("姓名輸入為空")} }$(".name").blur(function(){if(name == ''){$('#alert').html("姓名輸入為空")} }); </script>?
?
?
總結(jié)
以上是生活随笔為你收集整理的div+js写弹出框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： PS 扣字
- 下一篇： Python贪吃蛇小游戏