Confirm Dialog in Materialize.js

Question

I am using Materialize.js (Materializecss Framework) for development of responsive HTML pages. I want to have a confirm dialog for my requirement but Meterialize.js doesn't support it. Is it that Materialize.js is not having confirm dialog or I am unable to find it? How can I achieve this in Materialize.js?

Solution 1

I solved this way:

    <div id="md1" class="modal">
        <div class="modal-content">
            <h4>Please Confirm</h4>
            <p>Are you sure to proceed?</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="waves-effect waves-red btn-flat" onclick="$('#md1').closeModal(); return false;">Cancel</a>
            <a href="#" class="waves-effect waves-green btn-flat" id="md1_YesBtn">Yes</a>
       </div>
    </div>

    <a class="waves-effect waves-light btn" href="myLandingPage.html" onclick="showModal(this, 'md1'); return false;">Proceed</a>

    <script>  
        function showModal(but, modal){  
            $('#' + modal).openModal(); 
            $('#' + modal + '_YesBtn').click(function(){ $('#' + modal).closeModal(); document.location = but.href; }); 
        } 
    </script>

Solution 2

Materialize also has the modal window similar to other UI frameworks, you can trigger it,

$('#modal1').openModal();

Or initialize it using jquery to trigger it on href click event ,

  $(document).ready(function(){ 
    $('.modal-trigger').leanModal();
  });

Solution 3

I'm working with materialize 1.0.0 and for me this work, you could use a Toast without modal,

var toastHTML = '<span>Erase registry??</span><button class="btn-flat toast-action" onclick="deletefunction(id)">Delete</button>';
    M.toast({html: toastHTML});

It's possible add more buttons. Depends of your needs and imagination.

Solution 4

var $toastContent = $('<span>Remove?</span>')
        .add($('<button class="btn-flat toast-action red-text" onclick="$.delete('+id+');">Yes</button>'))
        .add($('<button class="btn-flat toast-action" onclick="Materialize.Toast.removeAll();">No</button>'));
    Materialize.toast($toastContent, 10000);

View more solutions

Comments

[Muhammad Salman Farooq]

I have used it as workaround. But It is not an in-build "confirm dialog". I want to have a framework provided confirm dialog which trigger a callback method on Yes or No button.