Reproducing fiddler with modal

Hi there!

I want to reproduce EXACTLY this fiddler : 
(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:


$('#myModal').on('', function() {

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

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

<!doctype html>
<script src=""></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>

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

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

<!-- 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 class="modal-body">
<button type="button" class="swal">
      <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>
<!-- Java script-->
    <script src="js/core.min.js"></script>
    <script src="js/script.js"></script>

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.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michael VasilevskySolutions ArchitectCommented:
Be sure to reference all external libraries (they're over on the left side of the JSFiddle page under Resources):

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
fskilnikAuthor Commented:
Excellent, Michael.

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

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.