Question

我有一个工作弹出下面的代码，我想将其转换为我在stunning smooth pop up using jquery找到的这个“简单”教程，但我一直在努力解决这个问题。

这是PHP脚本生成的html：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="lcal.ico" />
<link rel="stylesheet" type="text/css" href="css/css.php" />
<script type="text/javascript">
var dFormat = 1;
var dSepar = ".";
var time24 = 1;
var wStart = 1;
var dpToday = "today";
var dpClose = "close";
var dpMonths = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var dpWkdays = new Array("Su","Mo","Tu","We","Th","Fr","Sa","Su");

function resizeWin() {
  neededH = Math.min(700,document.getElementById('bodyArea').offsetHeight + 6); //max height: 700px
  currentH = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
    window.resizeBy(0,neededH-currentH);
}
</script>
<script type="text/javascript" src="common/dtpicker.js"></script>
<script type="text/javascript" src="common/cpicker.js"></script>
<script type="text/javascript" src="common/poptext.js"></script>
<script type="text/javascript" src="common/general.js"></script>

</head>

<body onLoad="resizeWin();" class="scroll">
<div id="bodyArea">
<div class="topText">
<h4 class="floatL">Create Schedule</h4>
</div>
<div class="contentS">

<script type="text/javascript">
function hide_times(t) {
    if (t.checked) {
        document.getElementById("dTimeS").style.visibility = "hidden";
        document.getElementById("dTimeE").style.visibility = "hidden";
    } else {
        document.getElementById("dTimeS").style.visibility = "visible";
        document.getElementById("dTimeE").style.visibility = "visible";
        t.form.start_time.value = t.form.end_time.value = "";
    }
}
</script>

<form id="event" name="event" method="post" action="index.php?xP=10">
<input type="hidden" name="id" value="0" />
<input type="hidden" name="mode" value="add" />
<table class="evtForm">

<col width='100px' /><col width='100px' /><col width='150px' /><col />

        <tr>

    <tr><td>Services:</td>
<td><select id="svc" name="svc"><option value="1" style="color: #000000; background: #00FF00;">Value1</option>
<option value="3" style="color: #000000; background: #FFFFFF;">Value1</option>
<option value="4" style="color: #000000; background: #33FFFF;">Value2</option>
<option value="6" style="color: #000000; background: #FF9999;">Value3</option>
</select></td></tr><tr><td>Contact Number:</td>
<td><input type=text name=ven id=ven value='' size=28 style=width:150% /></td>

</tr><tr><td>Initials:</td>
<td><input type=text name=pri id=pri value='' size=28 style=width:150% /></td>
</tr><td>Barber:</td>
<td><select id="cat" name="cat"><option value="1" style="color: #000000; background: #00FF00;">DMITRIY</option>
<option value="3" style="color: #000000; background: #FFFFFF;">User1</option>
<option value="4" style="color: #000000; background: #33FFFF;">User2</option>
<option value="6" style="color: #000000; background: #FF9999;">User3</option>
</select></td><tr><td>Start:</td>
<td><input type="text" name="sda" id="sda" value='01.07.2011' size="8" /><input class="button" type="button" title="Select Date" value="..." onclick="dPicker('nill','sda','eda');" /></td>
<td id="dTimeS"><input type="text"  name="sti" id="sti" value='08:00' size="6" /><a href="#" onclick="tPicker('sti')"><img src="images/time.png" alt="time picker" /></a></td>

<tr><td>End:</td>
<td><input type="text" name="eda" id="eda" value="" size="8" /><input class="button" title="Select Date" type="button" value="..." onclick="dPicker('nill','eda','sda');" /></td>
<td id="dTimeE"><input type="text" name="eti" id="eti" value='08:30' size="6" /><a href="#" onclick="tPicker('eti')"><img src="images/time.png" alt="time picker" <td/></a>

    </tr>
    <tr><td colspan="4"><hr /></td></tr>

    <tr>
        <td>Send mail:</td>
            <td colspan="3">
            <input type="checkbox" name="non" value="yes" /> now and/or&nbsp;

            <input type="text" name="not" maxlength="2" style="width:20px" value="" /> day(s) before event to:      </td>
    </tr>

    <tr>
        <td colspan="4">
            <input type="text" name="nml" id="nml" style="width:100%" value="email1@yahoo.com" />
            <div class="fontS">(email addresses separated by a semicolon - max. 255 chars.)</div>
        </td>

    </tr>



</table>

<div class='repBox' id='repBox'>
    <div class="floatC"><b>Set Repetition</b><hr /></div>
    <div>
        <input type="radio" name="r_t" id="r_t" value="0" checked="checked" /> No repeat        <br />
        <input type="radio" name="r_t" id="r_t" value="1" /> Repeat     <select name="ri1" id="ri1">

            <option value="1">every</option>
            <option value="2">every other</option>
            <option value="3">every third</option>
            <option value="4">every fourth</option>
        </select>
        <select name="rp1" id="rp1">
            <option value="1">day</option>

            <option value="2">week</option>
            <option value="3">month</option>
            <option value="4">year</option>
        </select>
         *)<br />
        <input type="radio" name="r_t" id="r_t" value="2" /> Repeat every       <select name="ri2" id="ri2">

            <option value="1">first</option>
            <option value="2">second</option>
            <option value="3">third</option>
            <option value="4">fourth</option>
            <option value="5">last</option>
        </select>

        <select name="rp2" id="rp2">
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>

            <option value="6">Saturday</option>
            <option value="7">Sunday</option>
        </select>
        of the month         *)<br /><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*) until      <input type="text" name="rul" id="rul" value="" size="8" />
        <input class="button" title="Select Date" type="button" value="..." onclick="dPicker('nill','rul','sda');" />
        (blank: no end)
    </div>

    <div class="floatC"><hr /><input class="button" type="submit" name="refresh" value="OK" /></div>
</div>

<div class="floatC">
<input class="button" type="submit" name="add_exe_cls" value="Add" />&nbsp;&nbsp;<input class="button" type="button" onClick="javascript:self.close()" value="Close" />
</div>
</form>
<script type="text/javascript">document.getElementById("tit").focus();</script></div>
</body>
</html>

Answer 1

如果您在转换此代码时遇到麻烦，我建议您查看Colorbox。

Answer 2

对于第一个弹出窗口，建议使用纯jQueryUI，对于你的问题，有元素“对话框”。

http://jqueryui.com/demos/dialog/

通过它，您可以使用一行代码弹出一个简单的html元素。

他们的样本：

<script>
$(function() {
    $( "#dialog" ).dialog();
});
</script>

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The           dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

与jQuery popup挣扎

2 个答案: