Javascript confirm(); replacement modal

Status
Niet open voor verdere reacties.
K

killer4all2

Gebruiker
Lid geworden
26 mei 2009
Berichten
449
Goedendag,

Ik ben al een hele tijd aan het zoeken voor een javascript (jquery) custom confirm(); Momenteel ben ik bezig met een eigen cms en als ik bijvoorbeeld een post verwijderd wil ik een mooie confirm box laten zien en niet een standard confirm() (die overigens door klanten als error aangezien kan worden).

Aangezien ik niet goed genoeg javascript met jquery kan ben ik niet in staat deze box zelf te maken. Ik had al een aantal sites gevonden met zulke confirm boxes, maar snap niet helemaal hoe deze werken.

Op het moment gebruik ik nog de standaard "Confirm();" van javascript. Deze roep ik aan met een onclick Bijvoorbeeld: <a href="delete.php?id=1" onclick="Confirm('Weet je het zeker?');">delete</a>. Hoe kan ik een custom modal box ook op deze manier laten werken. Zodat als er op een link word geklikt simpelweg en boxje omhoog komt en dat er staat Weet u het zeker? "Ja / nee".

Ik hoop dat iemand mij kan helpen :)

Mvg,
Rowan
 
Goeden avond bedankt voor je reactie!,

Nee ik heb deze nog niet geprobeerd :), maar ik snap niet helemaal hoe ik dit werkend krijg. Ik wil namelijk dat ik op een link klik, maar voordat hij naar deze link gaat moet hij eerst vragen of ik het zeker weet (confirmen). Als ik dan klik returned hij true naar de link of false (doordat ik onclick= return functie gebruik). Kan je mij misschien uitleggen hoe ik deze dan kan gebruiken? :)
 
Nu maak je een link op je pagina die de dialog activeert en in die dialog koppel je de delete-actie / link aan een knop
 
Sorry maar ik ben helemaal de weg kwijt. Ik snap niet helemaal wat je bedoel met quote; "en in die dialog koppel je de delete-actie / link aan een knop".

Mijn linkje die linked naar een pagina en geeft een ID mee van welke pagina hij zou moeten deleten. Want dit niet werkt <a href="delete.php?id=1" onclick="return $().dialog;">delete</a>

Ik snap niks van jquery en ook niet erg veel van javascript :(
 
Ik heb nog wat dingen geprobeerd maar ik kom er echt niet uit. :( Heb je misschien een voorbeeldje gebruikmakend van de broncode die op die site staat? :)

HTML: 
<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Modal confirmation</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
    </script>
</head>
<body>
 
<div id="dialog-confirm" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
 
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
 
 
</body>
</html>

Mvg,
Rowan
 
De code die je nu hebt sluit op beide knoppen gewoon het dialoog-venster door deze code:
[js]
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
[/js]

Verander je de code echter door dit, dan wordt je doorgestuurd naar een URL wanneer je op "Delete all items" klikt :)
[js]
buttons: {
"Delete all items": function() {
window.location = 'http://www.helpmij.nl';
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
[/js]

Of als je wilt dat het als submit-knop werkt:
[js]
buttons: {
"Delete all items": function() {
$("#id_van_form").submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
[/js]
Let wel, hierbij is het van belang dat je het gewenste formulier een CSS-ID meegeeft en die ID gebruikt voor de aanroep (In dit geval is de ID "id_van_form")
 
Hoi-hoi,
Het kan ook wel aardig zonder alle jQuery-geweld. :d

Met een css-popup:
  • Alleen een simpele show/hide javascript-functie voor het up te poppen confirm-blokje,
  • en de rest is css-styling.

In de html komt zoiets als dit te staan:
HTML: 
<div id="cfContainer">
	<a href="deleted.htm" onclick="toggleConfirm(); return false">Wis!</a>

	<span id="cfBox"><strong>Alles wissen? Weet u het zeker?</strong>
		<a id="del" href="deleted.htm"><strong>Ja</strong>, wissen maar</a>
		<a id="nop" href="#nop" onclick="toggleConfirm(); return false"><strong>Nee</strong>, toch niet wissen</a>
	</span>
</div>



=======
Wil je er wat animatie aan toevoegen, dan kan dat (ook zonder jQuery) met een paar regeltjes extra script; in totaal wordt dan het javascript:

[js]<script type="text/javascript">
var height=document.getElementById('cfBox').offsetHeight;

function toggleConfirm(){
if (document.getElementById('cfBox').style.marginLeft!="5em"){
document.getElementById('cfBox').style.marginLeft="5em";
document.getElementById('cfBox').style.height="0";
expand();
}
else {
shrink();
}
}
function expand(){
if (document.getElementById('cfBox').offsetHeight<height){
document.getElementById('cfBox').style.height=document.getElementById('cfBox').offsetHeight+1+"px";
setTimeout(expand, 15);
}
else {
clearTimeout(expand);
}
}

function shrink(){
if (document.getElementById('cfBox').offsetHeight>3){
document.getElementById('cfBox').style.height=(document.getElementById('cfBox').offsetHeight-4)+"px";
setTimeout(shrink, 10);
}
else {
clearTimeout(shrink);
document.getElementById('cfBox').style.marginLeft="-9999px";
}
}
</script>
[/js]
Meer dan deze ca. 25 regeltjes is er niet voor nodig. :)



Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan