javascript - Disable Close Modal on Outside Click

141

I am making some blog that use modal(s) with Materializecss, but i have problem with my modal onclick outside and on the false data, here is my code:

main.js

function changepassword(){
 var user = $('#userlog').val();
 var content = ""; 

content += '<div id="modganpas" >';
content += '<div >';
content += '<form>';    
content += '<><h3>change Password</h3>';
content += '<div><i >supervisor_account</i>';       
content += '</div>';
content += '<div >';
content += '<div >';
content += '<input id="changeUsername" name="changeUsername" type="text" disabled>';
content += '</div>';
content += '<div >';
content += '<input id="changePasswordold" maxlength="32" name="changePasswordold" type="password" >';
content += '<label for="changePasswordold">Password old</label></div>';
content += '<div >';
content += '<input id="changePasswordnew" maxlength="32" name="changePasswordnew" type="password" >';
content += '<label for="changePasswordnew">Password new</label></div>';
content += '<div >';
content += '<input id="changePasswordnew1" maxlength="32" name="changePasswordnew1" type="password" >';
content += '<label for="changePasswordnew1">Ulangi Password</label></div>';
content += '</div>';
content += '</form>';
content += '</div>';
content += '<div >';
content += '<a href="#" onClick="check_ganpass()" id="btn_ok" >Edit</a>';
content += '<a href="#!" onClick="cancelchangePassword()" >Cancel</a>';
content += '</div>';
content += '</div>';
content += '</div>';

    $("#formodal").append(content);
    $('#changeUsername').val(user);}


//for check


  function check_ganpass(){
  var username = $('#changeUsername').val();
  var passwordold = $('#changePasswordold').val();
  var passwordnew = $('#changePasswordnew').val();
  var passwordnew1 = $('#changePasswordnew1').val();
  var urlnyah  = 'pas.php';

  $.ajax({
    url   : urlnyah,


    data  : 'username='+username+'&passwordold='+passwordold+'&passwordnew='+passwordnew+'&passwordnew1='+passwordnew1, 
    type  : 'POST',
    dataType: 'html',
    success : function(pesan){
      if(pesan=='ok,'){
        Materialize.toast('Data Telah Berubah',4000);
      }
      else{
        Materialize.toast(pesan,4000);
      }
    }
  });}

pas.php

<?php include("connection.php");
session_start();
$username = $_POST['username'];
$passwordold = md5($_POST['passwordold']);
$passwordnew = md5($_POST['passwordnew']);
$passwordnew1 = md5($_POST['passwordnew1']);
    $query = mysql_query("select * from tuser where username ='$username' and password = '$passwordold'");
    $data = mysql_num_rows($query);
    if ($data ==1)
    {   if ($passwordnew == $passwordnew1){     mysql_query("UPDATE tuser SET password='$passwordnew1' WHERE username='$username'");
            echo "ok,";
        } else {
        echo "Password new not same";
        }}else{
        echo "Password old werong.";}?>

connection.php

<?php $sambung=mysql_connect('localhost','root', '')or die('Not connected : ' . mysql_error());
mysql_select_db("test", $sambung)or die('Not connected : ' . mysql_error());?>

The question is how to disable closing the modal on click outside of the box and if the entered data is wrong.

Thanks for the correction.

5

Answer

Solution:

// for disable modal when click outside

$('#modalid').openModal({dismissible:false});

// remove modal-action modal-close in ok button

<a href="#" onClick="check_ganpass()" id="btn_ok" class="waves-effect waves-green btn-flat ">Edit</a>

// insert bellow "Materialize.toast('Data Telah Berubah',4000);"

$('modalid').closeModal();

hope that answer your question. :)

464

Answer

Solution:

if you have only one modal, and are using jquery, you can do :

$('#myModal').modal()[0].M_Modal.options.dismissible = false;
$('#myModal').modal('open');

cheers

391

Answer

Solution:

Try this

$('#ModalID').modal({
    backdrop: 'static',
    keyboard: false
})

or in html set data attributes as below

data-backdrop="static" data-keyboard="false"

on popup call

Hope this helps..

408

Answer

Solution:

You can use dismissible Option for preventing this

 $('#your_modal_ID').modal({
                dismissible: false
            })

People are also looking for solutions to the problem: ajax - PHP "php://input" vs $_POST

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.