Modal dialog
Sziasztok,
van egy html / js kódom, ami, ha egy linkre kattintunk, feldob egy ablakot. Mindez a modal dialog megoldással történik. (Magyarul sajna nem tudom ennek a nevét). Azt szeretném megoldani, hogy a kis ablakban megadott adatok bekerűljenek a fő részbe. A pop - up ablaknál (mikor egy kölönálló html / php fájl töltődik be a felugró ablakban) ismerem a megoldást, de ennél sehogyan sem boldogulok.
Itt van egy alapkód, a neten találtam. Próbáltam beleilleszteni egy formot, de sehogyan sem akar működni:
■ van egy html / js kódom, ami, ha egy linkre kattintunk, feldob egy ablakot. Mindez a modal dialog megoldással történik. (Magyarul sajna nem tudom ennek a nevét). Azt szeretném megoldani, hogy a kis ablakban megadott adatok bekerűljenek a fő részbe. A pop - up ablaknál (mikor egy kölönálló html / php fájl töltődik be a felugró ablakban) ismerem a megoldást, de ennél sehogyan sem boldogulok.
Itt van egy alapkód, a neten találtam. Próbáltam beleilleszteni egy formot, de sehogyan sem akar működni:
<script type="text/javascript">
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</SCRIPT>
<style type="text/css">
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-image:url(elemek/semi_transparent1.png);
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
body {
height:100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
</body>
</html>
Hogyan?
Hogyan próbáltad beilleszteni az űrlapot? Mit jelent az, hogy nem akar működni?
Itt a kód: <script
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</SCRIPT>
<style type="text/css">
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-image:url(elemek/semi_transparent1.png);
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
body {
height:100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
<?php
echo $_POST['name'];
?>
<div id="overlay">
<div>
<FORM id="loginform" method="post" name="reply" form action="overlay2.php">
<label for="">név </label><BR>
<INPUT size="10" name="name" id="name"><BR>
<input type="button" value="Mehet" onClick="overlay()"/>
</FORM>
</div>
</div>
</body>
</html>
Mi a baj?
Igen, lehet hogy nem jól
sorral.
elküldés
Köszi a segítséget. Tényleg a
Üdv.
Sziasztok! Még egy
Még egy megoldandó probléma merült fel.
<a href='#' onclick='overlay()'><img src="elemek/kettő.gif" /></a>
<div id="overlay">
<div>
<p>itt kellene a képeket megjeleníteni</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
A főoldalon képeket jelenítek meg, amelyekre ha rákattintok, megjelenik az overlay ablak. AZt szeretném megoldani, hogy az a kép, amelyre kattintottunk, megjelenjen az overlay ablakban.
re: Sziasztok! Még egy
Ha nagyított képet akarsz
relattribútumában. Tehát így nézne ki:href
hrefattribútumot írod át a nagy kép elérési útvonalára.+1
Pilot számára a változás:
Részben már OK. Még annyi nem
var newImg = document.createElement('img');
newImg.src = elem.firstChild.getAttribute('rel');
var overlay = document.getElementById('overlay'); overlay.innerHTML='';
overlay.appendChild(newImg);
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
<div id="overlay">
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
Ez okozza a problémát
Már csak az overlay ablak
Külön függvénnyel
Tehát szedd szét a két függvényt, legyen az új pl. overlay_close(), ami mindössze az overlay div-edet rejtse el. Az eredeti függvényben pedig a láthatóságot kapcsold be. Vagy még jobb, ha egy külön modal_close()-t hozol létre (a név persze mindegy), a
thisparaméterrel hívod meg, így univerzálisabban használhatod bármely elem elrejtésére.Szerk: sőt, működhet a bezáró-függvényed eleve ki/be-kapcsolóként az aktuális állapot függvényében, ekkor az overlay()-ben csak meg kell hívnod magát a modal_close() függvényt, persze paraméterezésnél itt nem a
this-szel hívod meg, hanem az általad választott paraméternévvel, ami esetünkben az elem.De hogyan csináljam?? Az JS
Az JS tudásom abszolult nulla, ezelőtt soha nem használtam, valószínűleg ezután sem fogom. CSak ezt az egy problémát kellene megoldanom valahogy, úgyhogy nagyon hálás lennék, ha még egy kis konkrét kóddal kisegítenél....
Így.
Sikerült!!!! Nagyon
Nagyon köszönöm a segítségedet.