0

Duplicate:

Yes it is. Below is the references which I searched on stack overflow.

Reference 1

Reference 2

Reference 3

Reference 4

What I am looking for:

Actually I am making custom modal without using bootstrap. Overall my code is working fine and below is the live example of it:

$(window).click(function(e){
    let classname = e.target.className;
    if(classname == "ah-modal-wrapper") {
    e.target.style.display = 'none';
    }
});

Fiddle

Problem is when I select my inner text of modal and release my selection outside from modal its hide / close the modal. But my need is when I click outside of a modal then modal should closed immediately. Which is working fine. but I don't want that modal closed while releasing the mouse click outside from modal.

For more clearance please review below example:

Bootstrap Modal Example

Community
  • 1
  • 1
Ahmer Ali Ahsan
  • 5,636
  • 16
  • 44
  • 81

2 Answers2

1

Here is working code:

$('.ah-modal-wrapper').on('mousedown', function(e) {    
    $(this).hide();
});

$('.ah-modal').on('mousedown', function(e){
    e.stopPropagation();
});

Also updated jsfiddle

Mehdi Dehghani
  • 10,970
  • 6
  • 59
  • 64
  • outside the modal I want click event closed the modal. Not mouse down. As the bootstrap example is the best example of what I want. – Ahmer Ali Ahsan Sep 05 '16 at 17:49
  • 1
    Why is it important to using `click` instead of any other event? – Mehdi Dehghani Sep 05 '16 at 17:51
  • BTW if you like `click` event, you can change the code to `click, mousedown`, then the `click` event also will be added – Mehdi Dehghani Sep 05 '16 at 17:53
  • Because it is the standard of modal on most popular sites like bootstrap and facebook etc. So thats why I want this without using bootstrap. – Ahmer Ali Ahsan Sep 05 '16 at 17:53
  • If you need something standard, you should use `bootstrap` modal instead of re-creating something that is already created for you – Mehdi Dehghani Sep 05 '16 at 17:54
  • I agreed with you. But why I need to use bootstrap only for modal? I created my own theme without using bootstrap and I just want to use modal standard and for that I load whole Library of bootstrap. – Ahmer Ali Ahsan Sep 05 '16 at 17:56
  • As I said you can add `click` event too, but I don't think using `click` is standard way, you should use any event that works for you, also there is tons of `jQuery` plugins that implemented modal in standard way. – Mehdi Dehghani Sep 05 '16 at 17:58
  • As I said why I need to use other libraries only for custom modal. Below I posted my answer. Take a look only 4 lines of code solve my answer. But I appreciate your answer on my post. Thanks for your precious time. – Ahmer Ali Ahsan Sep 05 '16 at 18:40
0

Below is the code (answer) of my own question. 

let istextSelected = false;
    $(window).click(function(e){
        let classname = e.target.className;
        if(classname == "ah-modal-wrapper") {
            if(istextSelected == false) {
                e.target.style.display = 'none';
            }
        istextSelected = false;
    }
});

$(".ah-modal").on('mousedown',function(e){
   istextSelected = true;
});

Fiddle

Ahmer Ali Ahsan
  • 5,636
  • 16
  • 44
  • 81
  • BTW, adding `click` event on `document` decreasing the performance, I think you need to change the solution, don't use my code, but change the solution, just take a look on some plugin's source to find out how to deal with this problem. – Mehdi Dehghani Sep 05 '16 at 18:49
  • About let I know that it is not run on mostly every browser. But only in my Fiddle example I am using it. second thing is that about decreasing the performance I searched over a internet and found [this](http://stackoverflow.com/questions/12251266/does-performance-suffer-if-i-attach-onclick-events-to-body) – Ahmer Ali Ahsan Sep 07 '16 at 01:08