Reproducing fiddler with modal

fskilnik
fskilnik used Ask the Experts™
on
Hi there!

I want to reproduce EXACTLY this fiddler : https://jsfiddle.net/0Lng89tq/5/ 
(Please don´t ask my reasons to do it, nor tell me that modals were not created to be used like that, etc.)

To do so (that is, to reproduce that fiddler), I have created two files:

(A) JS file named modal_background.js with exactly the following content:

------------------------------------------------------
$(document).ready(function(){
$('#myModal').modal();

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});

$('.swal').click(function() {
      swal({title:'Test', input: 'text'});
});
});
------------------------------------------------------


(B) HTML file named fiddler_modal.html with exactly the following content:

------------------------------------------------------
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/modal_background.js"></script>

<meta charset="utf-8">
    <!-- Stylesheets-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

<title>Untitled Document</title>
</head>
<body>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<button type="button" class="swal">
swal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       
<button type="button" class="swal">
swal
</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>      
      
<!-- Java script-->
    <script src="js/core.min.js"></script>
    <script src="js/script.js"></script>
</body>      
</html>
------------------------------------------------------

When I put both files uploaded and the html page is load, the image attached successfully appears, but the "swal" button doesn´t work, I mean, I press it and it does nothing.

If I "close" the swal button, it closes as expected.  If I press any faded part of the screen, the swal button closes, as expected.

Question: what should I do in the code shown to make it work?  (I mean, what should I do so that when the swal button is clicked, it works as expected.)

If the two js files "core.min.js" and "script.js"  are problem-related, please tell me what I should change/take out from them to solve the problem.

They are lengthy, hence if you need it, please ask so that I will copy-paste them for your evaluation.

Thanks,
fskilnik
03Jan18_Figure.gif
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Solutions Architect
Commented:
Be sure to reference all external libraries (they're over on the left side of the JSFiddle page under Resources):

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js
https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.2.3/sweetalert2.min.css
https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.2.3/sweetalert2.min.js

Open in new window

Author

Commented:
Excellent, Michael.

Thanks for the solution (it worked!) and also for teaching me about this "fiddler detail". (I had no idea about that!)

Regards,
fskilnik.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial