Question

我正在使用Materialise.js（Materialisecss Framework）来开发响应式HTML页面。我想为我的要求设置一个确认对话框，但Meterialize.js不支持它。是Materialise.js没有确认对话框还是我找不到它？我怎样才能在Materialise.js中实现这个目标？

Answer 1

我这样解决了：

    <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>

Answer 2

Materialise也有类似于其他UI框架的模态窗口，你可以触发它，

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

或者使用jquery初始化它以在href点击事件

上触发它

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

Answer 3

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);

Answer 4

我正在使用实现1.0.0，对于我来说，您可以使用不带模式的Toast，

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

可以添加更多按钮。取决于您的需求和想象力。

确认Materialise.js中的对话框

4 个答案: