Javascript 使用Jquery在单击按钮时显示模式

我想在单击按钮时显示我的模式。下面是我的代码

<input type="button" id="button1" value="Button" onclick="myFunction()"/>
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>
            Modal Box</h2>
        <p>
            Hello world</p>
    </div>
</div>

模态盒

你好，世界

这是我未完成的剧本

<script type="text/javascript">
    $(document).ready(function () { 

    });
</script>

$（文档）.ready（函数（）{
});

在
按钮1上显示
OpenModel div

单击

$('#button1').on('click', function() {
    $('#openModal').show();
});

---

无需在

按钮上单击
onclick=“myFunction（）”

您可能需要设置可见性：隐藏；到div，并将其设置为visible onclick

让我们试试…

使用jquery、HTML和CSS创建的简单弹出窗口模型

$（函数（）{
//打开弹出窗口
$（“[popup open]”）。在（'click'，function（）上{
var popup_name=$（this.attr（'popup-open'）；
$（“[popup name=“”+popup_name+”]）。fadeIn（300）；
});
//关闭弹出窗口
$（“[popup close]”）。在（'单击'，函数（）上{
var popup_name=$（this.attr（'popup-close'）；
$（“[popup name=“”+popup_name+”）.fadeOut（300）；
});
//单击外部时关闭弹出窗口
$（'.popup'）。在（'click'，function（）上{
var popup_name=$（this）.find（'[popup-close]'）.attr（'popup-close'）；
$（“[popup name=“”+popup_name+”）.fadeOut（300）；
}).children（）。单击（函数（））{
返回false；
});
});
正文{
字体系列：Arial、Helvetica、无衬线字体；
}
p{
字体大小：16px；
线高：26px；
字母间距：0.5px；
颜色：#4848；
}
/*弹出打开按钮*/
.打开按钮{
颜色：#FFF；
背景#0066CC；
填充：10px；
文字装饰：无；
边框：1px实心#0157ad；
边界半径：3px；
}
.打开按钮：悬停{
背景：#01478e；
}
.弹出窗口{
位置：固定；
顶部：0px；
左：0px；
背景：rgba（0,0,0,0.75）；
宽度：100%；
身高：100%；
显示：无；
}
/*弹出内分区*/
.弹出内容{
宽度：500px；
保证金：0自动；
框大小：边框框；
填充：40px；
边缘顶部：20px；
盒影：0px2px6pxRGBA（0,0,0,1）；
边界半径：3px；
背景：#fff；
位置：相对位置；
}
/*弹出关闭按钮*/
.关闭按钮{
宽度：25px；
高度：25px；
位置：绝对位置；
顶部：-10px；
右：-10px；
边界半径：20px；
背景：rgba（0,0,0,0.8）；
字体大小：20px；
文本对齐：居中；
颜色：#fff；
文字装饰：无；
}
.关闭按钮：悬停{
背景：rgba（0,0,0,1）；
}
@媒体屏幕和屏幕（最大宽度：720px）{
.弹出内容{
宽度：90%；
} 
}

弹出窗口
模型
模型内容将在这里。Lorem ipsum dolor sit amet，
献祭精英。等分直径
威尼纳提斯自由女神。蜗壳前核
康瓦利斯。梅特斯·埃吉特·内克·亨德雷特前庭的整数。
埃尼安·维尔马蒂斯·普鲁斯。福斯调味品拍卖商tellus eget
乌兰科珀。矢状前庭软背甲前庭。
Lorem ipsum dolor sit amet，是一位杰出的献身者

将show（）更改为modal.show（）

$（'#button1'）。在（'click'，function（）上{

}))
 嗨，图萨，你能帮我一个查询吗？在HTML页面中，我应该在哪里编码模式？？当我尝试上述方法时，我可以在页面负载上看到nodal div内容。这不允许用户提交表单
modal.show（）
，或
modal（'show'），两者都用吗？另外，我认为这是一个引导解决方案？但是OP并没有使用引导。
$('#openModal').modal('show');