semantisch-ui ignoriert e.preventDefault in modalen Dialog

I semantisch-ui zu verwenden, ich versucht, von einer Seite mit einem modalen Dialog zu blockieren Übertragung entfernt, jedoch e.preventDefault() erscheint, nicht zu arbeiten:semantisch-ui ignoriert e.preventDefault in modalen Dialog

<!DOCTYPE html> 
<html> 
<head> 
    <title>Modal Block HREF</title> 

    <link rel="stylesheet" type="text/css" href="node_modules/semantic-ui/dist/semantic.min.css"> 
    <script src="node_modules/jquery/dist/jquery.min.js"></script> 
    <script src="node_modules/semantic-ui/dist/semantic.min.js"></script> 
</head> 
<body> 

<a class="dirty" href="http://www.microsoft.com">Microsoft</a> 
<a class="dirty" href="http://www.google.com">Google</a> 

<div id="confirmmodal" class="ui small modal"> 
    <div class="header">FIRST</div> 
    <div class="content"> 
     <div class="left"> 
      The first of many interesting things 
     </div> 
    </div> 
    <div class="actions"> 
     <div class="ui black deny button"> 
      Cancel 
     </div> 
     <div class="ui positive button"> 
      OK 
     </div> 
    </div> 
</div> 

<div id="savemodal" class="ui small modal"> 
    <div class="header">SECOND</div> 
    <div class="content"> 
     <div class="left"> 
      The second of many interesting things 
     </div> 
    </div> 
    <div class="actions"> 
     <div class="ui black deny button"> 
      Cancel 
     </div> 
     <div class="ui positive button"> 
      OK 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
$('.dirty').on('click', function(e, t) { 
    // This works... 
    //if (confirm('Are you sure')) { 
    // console.log("allow transfer"); 
    //} 
    //else { 
    // console.log("block transfer"); 
    // e.preventDefault(); 
    //} 

    // This does NOT work 
    $('#confirmmodal') 
     .modal({ 
      onApprove: function() { 
       console.log("allow transfer"); 
      }, 
      onDeny: function() { 
       console.log("prevent transfer"); 
        e.preventDefault(); 
       } 
      }) 
     .modal('show'); 
}); 
</script> 
</body> 
</html>

Was scheint zu passieren, ist der Link reagiert, unmittelbar bevor das Dialogfeld sogar erscheint, und selbst wenn ich auf Abbrechen schnell klicken, macht es keinen Unterschied.

Quelle

2016-06-09 imekon

Sie müssen verhindern, dass der erste Klick die Seite übermittelt. Verwenden Sie die folgende

<script type="text/javascript"> 
    $('.dirty').on('click', function(e, t) { 
     e.preventDefault(); 
     var href = $(this).attr("href"); 
     $('#confirmmodal') .modal({ 
      onApprove: function() { 
       console.log("allow transfer"); 
       window.location = href; 
      }, 
      onDeny: function() { 
       console.log("prevent transfer"); 
      } 
     }) .modal('show'); 
    }); 
</script>

Quelle

2016-06-09 13:17:46

Woohoo! Das hat wunderbar funktioniert. – imekon

Das einzige Problem ist, dass ein Rechteck um die Registerkarte, auf die der Benutzer geklickt hat, wie ein Fokus-Rect, verbleibt; Wie auch immer, um das zu verhindern? – imekon

@imekon das ist wahrscheinlich wegen "Umriss". Sie können das über CSS ausschalten. Ich glaube "Umriss: keine;" wird funktionieren. Wenden Sie es einfach auf jedes beliebige Element an (oder auf alles) –

semantisch-ui ignoriert e.preventDefault in modalen Dialog

Antwort

Verwandte Themen